Why the change to mobile style when clicked?

Made a page. Wrote her mobile design.
Began to check on the emulator and my phone (already sent the code to the hosting)
When you view and click on buttons design jump: changes the size tyknut dies.
What's the matter?

https://jsfiddle.net/d9u1fv65/

the <head>
<style>
@media (max-device-width: 870px){
a{
 background-color: lightblue;
 display: block;
 margin: 2em;
}
}
</style>
</head>
the <body>
<h1>Lorem ipsum.</h1>


<a href="#">Lorem ipsum dolor.</a>

<a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing</a>

<a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad Nesciunt doloribus, voluptatibus necessitatibus tempore.</a>

<a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>

</body>


On the frame, I poked a third on top of the die.
5cf504f0451d9998009361.jpeg
March 23rd 20 at 18:53
1 answer
March 23rd 20 at 18:55
Solution
It is even a browser bug can not be named. This feature.
In short, the problem is that not having a meta tag viewport, and links do not specify font-size (at least relative, in em or rem).
The page is considered not mobile-friendly. The browser in such cases can increase the font size to make it easier to read. But the size of indents (you is 2em) the browser does not recalculate and it turns out that the font size seems normal, but the size of the indentation - reduced (in fact, the size of the indentation is normal and the font size increased for convenience).
Once you interact with the element (a link in your case), there is a redraw, the browser understands that the page looks good with the current font size sets and have a real indentation.
The screenshot below shows that the bottom two links (I interacted with them) indented margin much more than the first two.
If it is difficult to understand, then just put his body in styles font-size and everything should fall into place. :)
a25541228d.jpg
That is, the browser saw the page changed it for themselves, and then, as an Advisory vote, pulled my code? - hortense37 commented on March 23rd 20 at 18:58
UPDATE. My comment above was incorrect. Below is correct.

@Christiana, there is in the end somewhat different.

@hortense37, you used a media query max-device-width, he has a different algorithm, it does not work on desktops, on mobile devices only, and therefore worked your styles only on phones and in the adaptability of the developer tool:
https://stackoverflow.com/questions/18500836/shoul...

Therefore it is better to just use max-widthif you are building a responsive website:


The use of max-device-width and similar is not a good idea, because it is deprecated + algorithm of its work is so-so, here is the list of outdated:
https://drafts.csswg.org/mediaqueries-4/#mf-deprecated

And don't forget about the meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">


But even without it (meta-tag) will work if the correct media queries to use:

- karianne93 commented on March 23rd 20 at 19:01
@hortense37, not really. browser originally account for your statements inside @media . just put the meta-tag viewport (above comrade wrote an example <meta name="viewport" ...) and everything will work.
If you want to understand exactly why, it is best not to bathe :) all Difficult. - Christiana commented on March 23rd 20 at 19:04
@Christiana, thank you. That is, in this case, there was a discord between setting determines the default styles browsers and calculation of parameter em. So? - hortense37 commented on March 23rd 20 at 19:07
@hortense37, no. Read my comment above. And examples in the sandbox.

You used outdated max-device-width which works only when the browser gives cell header (cell phone or emulation phone in development mode). Therefore, the styles are applied only on phones. - karianne93 commented on March 23rd 20 at 19:10

Find more questions by tags FrontendHTML