Задать вопрос
Shull
@Shull
хочу быть хорошим IT-шником
html

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

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

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

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
MODX: выбор нескольких элементов для TV полей с вводом текста в поле
28 нояб. 2024, в 09:05
2000 руб./за проект
Чат бот телеграмм-python
28 нояб. 2024, в 05:21
2000 руб./за проект
Проверить программу Python
28 нояб. 2024, в 05:18
500 руб./за проект
Ещё заказы