meta name="viewport" content="width = device-width works on PC and not on Android (explained inside)

0

I'm starting with responsive with HTML5 / CSS3. I'm stuck with one thing: I understand without problems what has to be done for the resolution to load a CSS or another using media queries.

I do:

<meta name="viewport" content="width=device-width, initial-scale=1, minim-scale=1 maximum-scale=1" /
<link href="estilosGranResolucion.css" rel="stylesheet" type="text/css" media="screen and (min-width: 700px)"/>

Well, well, in chrome with developer option on PC, I see that perfect, at 700 pixels width of the window, changes the appearance. Well, if I try it on a PC mobile emulator, the opera mobile emulator, I see that it does not change until 1049 exactly.

And if I put "min-width: 600px" it does not change up to 899 pixels. (in mobile emulator)

And if I put "min-width: 1000px" it does not change up to 1499 pixels. (in mobile emulator)

That is, the "offset" that is seen is not even constant. It is as if you always add a quantity to what I put, but the higher the resolution, the more you add before changing.

Why does not it change in the mobile emulator to the resolution that should change and in PC yes ?. I've also tried on a normal mobile and it's the same.

The truth is that I'm stuck with that.

Any track I appreciate, thank you.

Greetings.

    
asked by user3765208 05.08.2018 в 21:13
source

1 answer

0

Try with:

<meta name="viewport" content="width=device-width, initial-scale=1">
    
answered by 08.08.2018 в 18:34