Shull
@Shull
хочу быть хорошим IT-шником

Почему изменился мобильный стиль при нажатии?

Сделал страничку. Написал для неё мобильный дизайн.
Начал проверять, как эмулятором, так и через свой мобильник (уже отправил код на хостинг)
При просмотре и нажатии на кнопки, дизайн скачет: меняется размер тыкнутой плашки.
В чём дело?

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>


На кадре, я ткнул третью сверху плашку.
5cf504f0451d9998009361.jpeg
  • Вопрос задан
  • 135 просмотров
Решения вопроса 1
AlexanderTsymbal
@AlexanderTsymbal
tsymbal.su
Это даже багом браузера назвать нельзя. Такая особенность.
Если коротко, то проблема в том, что не проставлен метатег viewport, а у ссылок не задан font-size (Хотя бы относительный, в em или rem).
Страница считается не mobile-friendly. Браузер в таких случаях может увеличить размер шрифта, чтобы было его удобнее читать. Но размеры отступов (у вас это 2em) браузер не пересчитывает и получается, что размер шрифта вроде нормальный, а размер отступов - уменьшенный (на самом деле, размер отступов нормальный, а размер шрифта - увеличенный - для удобства).
После того, как вы взаимодействовали с элементом (ссылкой в вашем случае), производится его перерисовка, браузер понимает, что страница смотрится хорошо с текущим размером шрифта и устанавливает уже реальные отступы.
На скриншоте ниже видно, что у нижних двух ссылок (я с ними взаимодействовал) отступ margin гораздо больше, чем у первых двух.
Если сложно понять, то просто поставьте у body в стилях font-size и всё должно встать на свои места. :)
a25541228d.jpg
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы