different screen width in different browsers

@hebrerilloMay 24.2014

Hi everyone!!

I am testing a mobile website with a Huawei Y530 mobile with a 480px x 854px resolution.

The problem is that I am getting different widths in Android browser and Firefox browser. How is that possible??

This is just a very simple the code:

[code]

<!DOCTYPE html> <html> <head> <title></title> <meta name=”viewport” content=”initial-scale=1.0,width=device-width”> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″> <style>

/* Movil portrait */ @media only screen and (min-device-width : 480px) { body { background-color: red; } } </style>

<script>

alert(“width = ” + screen.width);

</script> </head> <body>

</body> </html>

[/code]

I am just changing the background-color to red if the screen with is 480px, which is my mobile device width. It works on Android browser, but it does not in Firefox browser.

Besides, the javascript ‘alert’ shows ‘width = 480px’ in Android browser, but it shows ‘width = 320px’ in Firefox browser

Thank you very much!!

to post a comment

5 Comments(s) _↴

@ShrineDesignsMay 24.2014 — #Looks like you will need to include [I]window.devicePixelRatio[/I].

http://stackoverflow.com/questions/17359915/get-screen-resolution-on-a-mobile-website

&lt;script&gt;
 alert('width:' + (screen.width * ('devicePixelRatio' in window ? window.devicePixelRatio : 1)) + 'px');
 &lt;/script&gt;

@hebrerilloauthorMay 24.2014 — #Now it is working in Firefox, the alert shows '480px', but now it is not working in the Android browser, the alert shows '720px'.

Besides, how can I solve the css media query issue??

<i>
 </i>/* Movil portrait */ 
 @media only screen and (min-device-width : 460px) 
 { 
 body { background-color: red; } 
 }

@deathshadowMay 25.2014 — #Mobile devices outright lie about their resolution -- and while things like the viewport meta and -webkit-text-size-adjust:none; help alleviate that problem, what it really comes down to is you shouldn't be using javascript to extract the width of the page in the first place, or manipulating stuff on mobile from the JS... no matter how many script-tards tell you otherwise. It is not reliable, useful, and can in fact alienate mobile users. [i]and desktop users... and laptop users...[/i]

Even THINKING in pixels is just asking for a poor resulting layout across devices -- which is why a semi-fluid and elastic layout that works WITHOUT SCRIPTING should be your first step before even thinking about responsive, and why you're media query triggers should NOT be pixel based, but instead ALSO be elastic and based on the needs of the content, [b]NOT[/b] the device.

It sounds to me like you're trying to pull some fancy scripted stunt that has no business on mobile -- or possibly even websites -- in the first place.

Though it's hard to say without actually seeing what you want to do with that width.

@hebrerilloauthorMay 25.2014 — #Ok, forget about the Javascript code. I am just worried about the CSS.

Two weird things are happening here. If I test this code:

<i>
 </i>
 
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;&lt;/title&gt;
 &lt;meta name="viewport" content="initial-scale=1"&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
 
 <i>    </i>&lt;style&gt;
 
 <i>    </i>  body
 <i>    </i>  {
 <i>    </i>    margin: 0;
 <i>    </i>    padding: 0;
 <i>    </i>  }
 
 <i>    </i>  #main
 <i>    </i>  {
 <i>    </i>    margin: auto;
 <i>    </i>    width: 320px; /* it is occupying the whole width of the screen, but the screen width is 480px */
 <i>    </i>    height: 600px;
 <i>    </i>  }
 
 <i>    </i>  @media only screen and (min-device-width : 480px)
 <i>    </i>  {
 <i>    </i>    #main 
 <i>    </i>    {
 
 <i>    </i>      background-color: red;
 <i>    </i>    }
 <i>    </i>  }
 
 
 
 <i>    </i>&lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div id="main"&gt;
 
 <i>    </i>&lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

FIRST WEIRD THING

As I told you, my screen width is 480px, so the media query is satisfied and the color of '#main' changes to red, but the weird thing is that '#main' is occupying the whole width of the screen, when the device screen width is 480px. How is that possible?

Does it mean that my screen width is 320px??

SECOND WEIRD THING

If I change 'min-device-width' to 'min-width' the media query is not satisfied. Why?? The 'min-width' is still 480px, isn't it??

But if I type 'min-width : 320px', the media query is satisfied, which means that the 'min-width' is 320px!!

@deathshadowMay 25.2014 — #Well... for starters if you declare a fixed width narrower than the device on FF mobile, it WILL auto-zoom to that because devices LIE about their widths as they mostly expect crappy sites that are crappy fixed widths. It's ANOTHER reason you shouldn't be declaring a fixed width in a mobile layout in the first place, or have pixels in your media queries other than MAYBE a 192px min-width or your text-size-adjust wrappe... Wait... FF on mobile? Forgot there even WAS such a thing -- and... yup, sure enough... it too has the idiotic halfwit "text-size-adjust" property where it will auto-scale layouts even when you don't want it to.

Try this:

@media (max-width:600px) { * { -webkit-text-size-adjust:none; } }
 
 * {
 -moz-text-size-adjust:none;
 -ms-text-size-adjust:none;
 }

In addition to making sure the viewport META prevents it from lying on both axis:

&lt;meta
 name="viewport"
 content="width=device-width; height=device-height; initial-scale=1.0"
 /&gt;

That should stop the "site not designed for mobile" auto-adjusting code from interfering with what you are doing. The -webkit-text-size-adjust property is inside a media query to try and prevent it from running on Safari desktop, as for some jacktard reason that prevents zoom from working on desktop but not on mobile. (which is about as stupid as things can get)

Though again, you shouldn't be targeting by pixels for widths in the first place. They often don't exist to the BROWSER or are not the measurement being used by the device. Even with all of the above in place, your methodology is flawed.

Also, even for testing, it might help if your STYLE tag (though honestly even in testing I keep the CSS in a separate file as it's just sloppy crappy code to have it in the markup) had a MEDIA attribute targeting the normal screen stack of "screen, projection, tv" -- since you could then also axe the extra screen test...

... and really you should be having that latter query checking for width not device-width, since not all mobile browsers (blazer for example) even report device-width.

Success!

Help @hebrerillo spread the word by sharing this article on Twitter...

Tweet This

different screen width in different browsers

5 Comments(s) _↴

Success!

Social

Version

different screen width in different browsers

5 Comments(s) ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴