2

I tested media query, using six different browsers in a Huawei Ascend Y330/Android 4.2 and got three different device-width results reported by mqtest.io.

For each browser, I then tested the actual breakpoints on my own html-page with css like: @media only screen and (max-device-width: 320px) -- and by altering the pixel-value until formating-change showed up. Device-width in all six cases agree with what was reported by mqtest.io for the device.

Obviously, the problem is one can't control the design because the browser inconsistency. Is this a »local» problem or is it a general problem when using @media?

Results according to mqtest.io and the web page test

Dolphin and Android default browser
device-width: 480px
device-height: 800px

Opera and Google Chrome
device-width: 320px
device-height: 534px

Firefox and Firefox Beta
device-width: 320px
device-height: 533px

Screen: 480x800
Pixel ratio: 1.5 (as reported by mqtest.io for all six browsers)

Dzienny
  • 3,295
  • 1
  • 20
  • 30
Håkan Olsson
  • 91
  • 1
  • 3

2 Answers2

0

Does the following piece of code fix the issue?

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
Aniruddh Agarwal
  • 257
  • 3
  • 9
0

I had that code in the test page but it doesn't help. Also, I ran a few more tests and it becomes obvious that device-width simply is unpredictable. Thanks for you answer.

Håkan Olsson
  • 91
  • 1
  • 3