My iPhone Thinks It's 980Px Wide

My iPhone thinks it's 980px wide

When using media queries you need to add this to your head tag.

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

This allows the website to detect that it is being used on a device.

You can also do this,

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">

This part, user-scalable=0; prevents the user from zooming with their fingers and is useful if you have position: fixed elements.

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 does the Chrome DevTools Responsive viewport think it's 980px wide?

For accepting answer

As stated in comments: you are missing meta tag with viewport that is required for media-queries to take effect.

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".

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

---

Related Topics