Why Is My Android Device-Width 980Px

Why is my Android device-width 980px?

You might want to try using max-width instead of max-device-width. It could well be a pixel-density thing - max-device-width might be reporting device pixels instead of CSS pixels.

Here's a test page:

http://jsfiddle.net/56XhE/

To really get a handle on this, you'll want to read Peter-Paul Koch's "A Tale of Two Viewports":

http://www.quirksmode.org/mobile/viewports.html
http://www.quirksmode.org/mobile/viewports2.html

And possibly his recommendation on doing CSS for mobile devices:

http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

Why is document.documentElement.clientWidth 980px on mobile phone

OK. It's here: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25

"The default width is 980px"

Why is my phone simulating a wider screen resulution

I think you forgot to set your meta viewport tag (to this):

<meta name="viewport" content="width=device-width, initial-scale=1">

Source: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Explain the behaviour of mobile browsers when meta viewport tag is not included

You must have missed the early days of the internet in your hands, before the meta viewport feature and "responsive design" came about. In an attempt to fit the website on your screen, browsers would attempt to zoom out and give you a birds eye view of the website - sort of like standing 10 feet away from your desktop screen.

You would then zoom in and out to interact with different portions of the website. Different browsers/devices implemented this zooming differently. Some attempted to find the widest part of your website and zoom out enough to include it, others might have just assumed that your site fits inside a certain width and zoom out to fit.

Back in the day, 980 was the defacto standard width for websites as it was sure to fit on most people's desktop monitors. So it stands to reason that your device is making the assumption "this clearly is not a responsive site, meaning it was likely built 10 years ago, pretend like the screen is 980px wide".

window.innerWidth in Chrome's device mode

window.innerWidth and innerHeight return the dimensions of the visual viewport. In desktop browsers, this is generally the browser's window dimensions. On mobile the situation is a bit more complicated because of pinch zoom.

When you load a page without a <meta name="viewport"> tag, a default layout width is used (e.g. Chrome uses 980px). When the browser loads the page it does so maximally zoomed out. It looks like your device size above has a width of 425px so the browser zooms out when the page is loaded to see the whole 980px. If you have content that's wider than this (e.g. your image) it'll zoom out even further. Seeing as how your window.innerWidth is 1248, that implies a scale factor of about 30%.

tl;dr: innerWidth/innerHeight reflect viewport with the pinch-zoom factor applied and the page is loaded fully zoomed out.

EDIT: This has since changed in Chrome. window.innerWidth now returns the layout viewport width. To get the visual viewport width, use window.visualViewport.width. See this article for more details.

Mobile Safari window reports 980px

You're getting the default viewport setting. See Apple iOS docs - meta tag and search for 'viewport'.

Property Description
width The width of the viewport in pixels. The default is 980. The range is from 200 to 10,000. You can also set this property to the constants described in “number.”
Available in iOS 1.0 and later.

To get the device width, as per the docs:

For example, to set the viewport width to the width of the device, add this to your HTML file:

<meta name="viewport" content="width=device-width" />

wrong borders' width in android browser

There is no standard solution, too bad.
You can make the next tricks to avoid an inconsistent displaying of borders with 1px width.

make colour of borders slightly transparent, i.e. with alpha <= 0.5. For example border-color: rgba(169, 0, 52, 0.5) I tested this on Android 4.4.2 Chrome & Yabrowser browsers. Works fine!;

make width/height of bordered element odd, and shift element position. Here you need to experiment and use JS, saying like:

$('div.elemWithBadBorders').each(function(){
    var $el = $(this);
    var width = $el.width();
    if(width % 2 == 0){
        $el.css('width', (width+1)+'px');
    }
});

Disable borders if showed on Retina displays or other hires screens. You need to use media query in css like this:
```
 @media (-webkit-min-device-pixel-ratio: 1.5) {
    div.elemWithBadBorders {
        border: none;
    }
 }
```
where 1.5 is pixel density. On Retina displays it appears as 2

For @media queries why do I have to put device in the max width query?

When using media queries, you should also use:

<meta name="viewport" content="width=device-width, initial-scale=1"/>

in your header.

max-width is the width of the target display area, e.g. the browser

max-device-width is the width of the device's entire rendering area, i.e. the actual device screen

Why Is My Android Device-Width 980Px