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

Question

Сергей @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>

На кадре, я ткнул третью сверху плашку.

Вопрос задан более трёх лет назад
143 просмотра

5 комментариев

Подписаться 1 Простой 5 комментариев

Алексей Ярков @yarkov

уже отправил код на хостинг

Ну так и дайте ссылку. Что за мания ставить диагноз по скриншотам?

Написано более трёх лет назад
Сергей @Shull Автор вопроса

Алексей Ярков, shull.ru

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега HTML

Оформите вопрос правильно, выложив код в песочницу, например:
https://jsfiddle.net/

Или просто ссылкой на проект.

Написано более трёх лет назад
Сергей @Shull Автор вопроса

Рустам Байназаров, https://jsfiddle.net/d9u1fv65/
Только я не знаю, можно ли там врубать эмулятор мобильника?

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега HTML

Сергей, эмулятор мобильного включается в режиме инспектора кода. Песочница служит лишь местом, куда можно выложить код, чтобы другие люди могли посмотреть проблему и помочь вам.

Это нужно делать, если проблемный код находится только локально или же по какой-то причине вы не можете прислать ссылку на проект.

В вашем же случае, спасибо, вы уже прислали ссылку, поэтому песочница уже не нужна.

Написано более трёх лет назад

Решения вопроса 1

5 комментариев

Сергей @Shull Автор вопроса

То есть, браузер увидел страницу, изменил её под себя, а потом, в качестве совещательного голоса, подтянул мой код?

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега HTML
UPDATE. Мой комментарий выше был неверный. Ниже правильный.

Александр Цымбал, тут в итоге несколько иное.

Сергей, вы использовали media-запрос max-device-width, у него другой алгоритм работы, он не работает на десктопах, только на мобильных устройствах, поэтому и работали ваши стили только на телефонах и в режиме адаптивности инструментом разработчика:
https://stackoverflow.com/questions/18500836/shoul...

Поэтому лучше использовать просто max-width, если вы строите адаптивный сайт:
snippet

Использование max-device-width и похожих не очень хорошая идея, т. к. оно считается устаревшим + алгоритм его работы так себе, вот тут список устаревших:
https://drafts.csswg.org/mediaqueries-4/#mf-deprecated

И не забывайте про мета-тег:
<meta name="viewport" content="width=device-width, initial-scale=1">

Но даже без него (мета-тега) будет работать, если верные media-запросы использовать:

snippet
Написано более трёх лет назад
Александр Цымбал @AlexanderTsymbal

Сергей, не совсем. браузер изначально учёл ваши инструкции внутри @media . просто поставьте мета-тег вьюпорт (выше товарищ написал пример <meta name="viewport" ...) и будет всё работать.
Если хотите понять именно причину, то лучше не париться :) Сложно всё.

Написано более трёх лет назад
Сергей @Shull Автор вопроса

Александр Цымбал, спасибо. То есть, в данном случае, произошёл разлад между умолчальными стилями браузерами и исчислением параметра em. Так?

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега HTML

Сергей, нет. Прочитайте мой комментарий выше. И примеры в песочнице.

Вы использовали устаревший max-device-width, который работает только, когда браузер отдаёт мобильный заголовок (мобильный телефон или режим эмуляции телефона в режиме разработки). Поэтому и стили применялись только на телефонах.

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

HTML

+1 ещё

Простой
Как поставить элементы в одну строку и выровнять их?
- 1 подписчик
- 11 часов назад
- 68 просмотров
1

ответ
HTML

+1 ещё

Простой
Почему не работает pattern на input?
- 1 подписчик
- 11 часов назад
- 52 просмотра
2

ответа
HTML

+2 ещё

Простой
Как подкрасить 2 блока в разные цвета по всей ширине в дочернем Blade-шаблоне?
- 1 подписчик
- 15 часов назад
- 48 просмотров
2

ответа
HTML

+2 ещё

Средний
Неправильное отображение верстки во всех браузерах локально на компьютере, в чем может быть проблема?
- 1 подписчик
- 15 часов назад
- 61 просмотр
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- 19 часов назад
- 75 просмотров
0

ответов
JavaScript

+3 ещё

Средний
Какие есть способы организовать редкое добавление статей на сайт?
- 1 подписчик
- вчера
- 113 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как сделать авто подтверждение?
- 2 подписчика
- вчера
- 140 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему не работает ссылка в HTML?
- 2 подписчика
- 16 апр.
- 137 просмотров
1

ответ
HTML

Простой
Почему не подключается спрайт SVG?
- 1 подписчик
- 16 апр.
- 72 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Как исправить прыгающий контент у сайта?
- 2 подписчика
- 15 апр.
- 217 просмотров
1

ответ
Показать ещё Загружается…

Frontend-разработчик (React)

ДАЛЕЕ

от 130 000 ₽

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Взлом автомобильной программы

19 апр. 2024, в 05:01

999999 руб./за проект

Доработать телеграм бота

19 апр. 2024, в 03:52

1000 руб./за проект

Написать код на python

19 апр. 2024, в 03:01

1000 руб./за проект

уже отправил код на хостинг

Ну так и дайте ссылку. Что за мания ставить диагноз по скриншотам?
Оформите вопрос правильно, выложив код в песочницу, например:
https://jsfiddle.net/

Или просто ссылкой на проект.
Рустам Байназаров, https://jsfiddle.net/d9u1fv65/
Только я не знаю, можно ли там врубать эмулятор мобильника?
Сергей, эмулятор мобильного включается в режиме инспектора кода. Песочница служит лишь местом, куда можно выложить код, чтобы другие люди могли посмотреть проблему и помочь вам.

Это нужно делать, если проблемный код находится только локально или же по какой-то причине вы не можете прислать ссылку на проект.

В вашем же случае, спасибо, вы уже прислали ссылку, поэтому песочница уже не нужна.

Answer 1 · 2019-06-03 14:51:57

Это даже багом браузера назвать нельзя. Такая особенность.
Если коротко, то проблема в том, что не проставлен метатег viewport, а у ссылок не задан font-size (Хотя бы относительный, в em или rem).
Страница считается не mobile-friendly. Браузер в таких случаях может увеличить размер шрифта, чтобы было его удобнее читать. Но размеры отступов (у вас это 2em) браузер не пересчитывает и получается, что размер шрифта вроде нормальный, а размер отступов - уменьшенный (на самом деле, размер отступов нормальный, а размер шрифта - увеличенный - для удобства).
После того, как вы взаимодействовали с элементом (ссылкой в вашем случае), производится его перерисовка, браузер понимает, что страница смотрится хорошо с текущим размером шрифта и устанавливает уже реальные отступы.
На скриншоте ниже видно, что у нижних двух ссылок (я с ними взаимодействовал) отступ margin гораздо больше, чем у первых двух.
Если сложно понять, то просто поставьте у body в стилях font-size и всё должно встать на свои места. :)

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

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

Минуточку внимания

Войдите на сайт