Why did the mobile style change on click?

S

Sergey2019-06-03 14:32:46

HTML

Sergey, 2019-06-03 14:32:46

Made a page. Wrote mobile design for it.
I started to check both with the emulator and through my mobile phone (already sent the code to the hosting)
When viewing and clicking on the buttons, the design jumps: the size of the poke die changes.
What's the matter?
https://jsfiddle.net/d9u1fv65/

<head>
<style>
@media (max-device-width: 870px){
    a{
        background-color: lightblue;
        display: block;
        margin: 2em;
        }
}
</style>
</head>
<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. Nesciunt ad doloribus, voluptatibus tempore necessitatibus.</a>

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

On the frame, I poked the third die from the top.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Alexander Tsymbal, 2019-06-03
@Shull

It can't even be called a browser bug. Such a feature.
In short, the problem is that the viewport meta tag is not set, and the links do not have a font-size set (At least relative, in em or rem).
The page is considered not mobile-friendly. The browser in such cases may increase the font size to make it easier to read. But the browser does not recalculate the indentation sizes (you have it 2em) and it turns out that the font size seems to be normal, and the indentation size is reduced (in fact, the indentation size is normal, and the font size is increased - for convenience).
After you have interacted with the element (link in your case), it is redrawn, the browser understands that the page looks good with the current font size and sets the real padding.
In the screenshot below, you can see that the bottom two links (I interacted with them) have a much larger margin indentation than the first two.
If it's hard to understand, then just put font-size on the body and everything should fall into place. :)