Смущает "initial-scale=1.0"

Я новичок, пытающийся сделать адаптивный сайт. Я прочитал эту статью https://css-tricks.com/snippets/html/responsive-meta-tag/ и следовал советам w2schools, но я все еще путаю с "initial-scale=1.0". Я также читаю вопросы Stackru, связанные с этим вопросом. Моя репутация слишком низкая, чтобы добавлять дополнительные вопросы в качестве комментариев - вот почему я спрашиваю.

Я не вижу разницы между этим:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

и это:

<meta name="viewport" content="width=device-width">

Я тестировал эти фрагменты кода во многих браузерах, и я не могу решить, какой код лучше и почему. Если я опущу "initial-scale=1.0", браузеры как-нибудь добавят его для меня? Похоже, они будут.

Источник

2 ответа

Часть "initial-scale=1.0" устанавливает начальный уровень масштабирования при первой загрузке страницы браузером. "width=device-width" устанавливает ширину страницы, которая будет соответствовать ширине экрана устройства, в зависимости от того, что они используют.

Вот хорошая ссылка, чтобы прочитать об этом:

https://www.w3schools.com/css/css_rwd_viewport.asp

"На экранах с высоким разрешением страницы с начальным масштабом = 1 будут эффективно масштабироваться браузерами. Их текст будет гладким и четким, но их растровые изображения, вероятно, не будут использовать преимущества полного разрешения экрана. Чтобы получить более четкие изображения на этих экранах веб-разработчики могут захотеть проектировать изображения - или целые макеты - в более высоком масштабе, чем их окончательный размер, а затем уменьшать их, используя свойства CSS или окна просмотра. Это соответствует спецификации CSS 2.1, которая гласит: "- MDN,

https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

Источник

Просто используйте начальный масштаб =1.0

Вы увидите разницу при просмотре своего сайта на разных мобильных устройствах.

Например, ширина страницы намного больше экрана, и у вас есть горизонтальная полоса прокрутки. Вы можете подумать использоватьoverflow-x: hidden но не просто установите начальную шкалу на 1 для всех устройств в голове

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Источник

Я использовал initial-scale=1, но заметил, что его удаление - вопреки рекомендациям по CSS Tricks и авторам UIkit (v2) - дало мне идеальное, как и ожидалось, начальное масштабирование при загрузке страницы с использованием Chrome на Android и с шелковым браузером на Kindle. Включение initial-scale = 1 означало, что страницы загружались с некоторым полуслучайным уровнем масштабирования, который выглядел любительским. Настольные браузеры Edge, Chrome и Firefox хороши, но я еще не тестировал более широко на мобильных устройствах. Для Android я отключил initial-scale=1, и мне понадобится очень веская причина, чтобы снова включить его.

<meta name='viewport' content='width=device-width'>

CSS трюки на самом деле использует вышеупомянутое на своем (очень хорошо) сайте

Источник
Другие вопросы по тегам