Viewport and CSS media query gets different width?

illest

New Member
I am having problem creating css media queries for smartphones, especially for Android devices such as Samsung Galaxy S3.It seems like \[code\]<meta name="viewport" content="width=device-width, initial-scale=1.0" />\[/code\] and CSS media query gets different data on device-width.If I hold my Galaxy S3 in portrait mode its screen is 720 x 1280, and it seems like \[code\]content="width=device-width\[/code\] from meta viewport is giving me the same width.But if I look at same page in landscape mode it seems like \[code\]content="width=device-width\[/code\] from meta viewport is still giving me 720 width while listening to a bigger sized media query, so to speak 1280.This results in web pages loading with a somewhat zoomed view, probably since it thinks that 720 is max width.Check screens:Galaxy S3 Portrait (Chrome)
lxl9T.jpg
Galaxy S3 Landscape (Chrome)
6f4fk.jpg
Above was tested on Samsung Galaxy S3 with Chrome browser.I have a similar problem, actually worse with the default Android browser called "Internet". There it seems to ignore all CSS media queries while still listening to viewport.Check screen: Galaxy S3 Portrait (Default)
f5OEo.jpg
 
Back
Top