Why CSS Media Query doesn't work on mobile device but yes on Google Chrome device emulator?

Question

As from the title, I don't understand why the media query works on emulator device on Google Chrome and it doesn't work on a real mobile device.

Html meta tag

<meta name="viewport" content="width=max-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Css:

@media screen and (min-device-width:640px) and (max-device-width:767px){...}

Actually I've set up the min and max resolutions from 640/768/850/1024 for mobile devices screen resolution, but it seems be an error, cause .... I don't understand yet

Don't do this `maximum-scale=1, user-scalable=no"` it's not recommended and provides a very poor user experience. — Paulie_D, Jun 20 '14 at 14:18
But surely by removing that it will fail to view properly on a mobile device? — user3520443, Jun 20 '14 at 16:13

score 3 · Answer 1 · answered Jun 20 '14 at 14:12

3

You should apply device width in meta viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

answered Jun 20 '14 at 14:12

Vangel Tzo

8,885
3
26
32

score 2 · Answer 2 · answered Jun 20 '14 at 14:14

2

The CSS should be like the following and check:

@media screen and (min-width:640px) and (max-width:767px){...}

answered Jun 20 '14 at 14:14

Exploring

573
2
6
19

Why CSS Media Query doesn't work on mobile device but yes on Google Chrome device emulator?

2 Answers2

Linked