CODEWITHSUNDEEP
media-queries
tv4free
tv4free

Reputation: 287

media query, browser width issue on mobile

This is my grid setup for media query. But, it shows its in 980px on my mobile. 

 @import "grid/grid";

 $display_320: 'only screen and (max-width: 479px)'; $display_480:
 'only screen and (min-width: 480px) and (max-width: 767px)';
 $display_768: 'only screen and (min-width: 768px) and (max-width:
 985px)'; $display_1024: 'only screen and (min-width: 986px)';

 @media #{$display_320} {   @import "grid/grid_320"; } @media
 #{$display_480} {   @import "grid/grid_480"; } @media #{$display_768} {   @import "grid/grid_768"; } @media #{$display_1024} {   @import
 "grid/grid_1024"; }

My mobile phone is suppose to be 320px, but it says 980px. Do I have to do anything in my html?

Here is my code : http://jsfiddle.net/m38Gw/

Upvotes: 2

Views: 172

Answers (2)

Kelderic
Kelderic

Reputation: 6687

What's Going On

A lot of mobile browsers will provide fake information about their window width. This started with the iPhone because the pixel density was (is) so high compared to traditional computer monitors.

To give a more current example, the Galaxy S4 has a screen resolution of 1920x1080 pixels. That is the exact same as my 27" monitor. Media Queries, without resolution spoofing by mobile browsers, would be utterly useless here, because there is no difference in terms of real pixels.

To combat this, we have the viewport. This is the "fake" resolution of the mobile device, normally much smaller than the true resolution. Through the viewport we can retain use of media queries.

As tv4free stated, we have a tool to control the viewport, in the form of meta elements. One potential issue with his code though, is the maximum-scale. This will fix the viewport and not allow any scaling. Personally, I don't think that is an a problem is your media queries are properly designed. However, many people consider it to be a bad idea. If you leave out maximum-scale=1.0; user-scalable=0;, you will make the page load correctly each time, but allow the user to zoom in and out.

Code

Set the resolution, allow zoom:

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

Set the resolution, don't allow zoom:

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

More information:

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

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

Upvotes: 0

tv4free
tv4free

Reputation: 287

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

this solved my problem. Thanks

Upvotes: 1

Related Questions