Почему при масштабировании страницы содержимое не приближается/отдаляется?

Question

[anastasiavast]

При вёрстке страницы сразу уделила внимание адаптивности, хотя пока есть только хэдер. Изучив данный вопрос, приняла решение все единицы измерения заменить на относительные- rem. Также, указала в html и body font-size:1vw; - это действительно помогло. Прописала медиа-запросы и когда захожу в devtools всё красивенько адаптируется и никуда не съезжает. Однако, заметила такую проблему, что когда масштабирую на десктопе страницу (Ctrl+Scroll), по сути должно всё работать как лупа: приближать или отдалять, но в моём же случае содержимое снова "адаптируется" и при zoom 25% страница выглядит ровно также как при zoom 100%, а при zoom 400% вообще срабатывает медиа-запрос и отображается "мобильная версия". Как исправить это понять не могу, сама только учусь.

Comments

[Ankhena]

при zoom 25% страница выглядит ровно также как при zoom 100%

Логично, ведь единица физически 1vw не изменилась.

при zoom 400% вообще срабатывает медиа-запрос

Так, а почему он не должен срабатывать?
Какой вьюпорт изначально и какое значение в media?

Предположим изначально было 1920. Если его поделить на 4, получится 480. Я бы тоже стала показывать мобильную версию на 480...

Answer 1

[Антон Антон]

1vw - это один % от ширины вьюпорта. при "зуме" эта ширина не изменяется, этот размер меняется только при том самом изменении ширины вьюпорта (окна или в режиме адаптивного дизайна того что изображает экран). Надо заменить на что-то более "относительное", например на rem.

Comments

[anastasiavast]

Хорошо, я вообще убрала из html и body font-size:1vw; теперь при "отдалении" всё в порядке страница отдаляется в середину но при zoom 400% всё так-же отображается мобильная версия :(

[anastasiavast]

anastasiavast, Объясню, изначально мне было нужно чтобы в devtools при изменении размеров экрана размер текста в хэдере пропорционально увеличивался или уменьшался. Нашла такой способ решения как html и body font-size:1vw, теперь же убрав эти строки размер текста в хэдере остается тем же.

[Антон Антон]

anastasiavast,

при zoom 400% всё так-же отображается мобильная версия

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

при изменении размеров экрана размер текста в хэдере пропорционально увеличивался или уменьшался

ну так все правильно. при использовании vw зум не влияет на размер шрифта, он всегда 1% от ширины.

зум с колесом работает не как лупа, а как растягивание пикселей, т.е. их количество во вьюпорте уменьшается.

[anastasiavast]

Антон Антон, Так и что мне делать то...

[Антон Антон]

надо понять, что же нужно, внимательно прочитать https://developer.mozilla.org/en-US/docs/Web/HTML/... и статьи про этот мета тег

возможно придется перехватывать колесо мыши скриптом и менять значения в этом теге