x
 
Сергей Филиппов
27 августа 2020
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Василий, что нужно прописать в стилях, чтобы сайт на Айфоне выглядел также как на Андроиде, а не в два раза меньше?


Сергей!

Чтобы сайт отоб­ра­жался в оди­на­ко­вом мас­штабе на всех мобиль­ных устрой­ствах, нужно задать ширину вьюпорта:

<head>
  <!-- ... -->
  <meta name="viewport" content="width=device-width">
</head>

Вью­порт — это что‑то вроде вир­ту­аль­ного окна, в кото­ром отри­со­вы­ва­ется сайт, а затем мас­шта­би­ру­ется и впи­сы­ва­ется в окно бра­у­зера. По умол­ча­нию вир­ту­аль­ное окно гораздо шире экрана устрой­ства. Напри­мер, в Сафари ширина вью­порта равна 980 пик­се­лям, а ширина экрана — 320…414 пик­се­лям, что даёт трёх­крат­ный и дву­крат­ный зум.

Покажу на при­ме­рах, как вли­яет ширина вью­порта на мас­штаб страницы:

980 пк
<meta name="viewport" content="width=980">
490 пк
<meta name="viewport" content="width=490">
Ширина устройства
<meta name="viewport" content="width=device-width">

Ещё по теме

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

Поделиться
Отправить

Комментарии

Глеб Кемарский
28 августа 2020

Совет Юрия Мазурского про вьюпорт:
https://bureau.ru/soviet/20191121/


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Как бороться с багами? Часть десятая: не утонуть в багах и глюках Как организовать процесс сдачи задачи и код-ревью в рамках спринта? Типовые решения в вёрстке. Как форматировать ХТМЛ 9 Стоит ли менять работу, если уже порядком поднадоело, но есть новые проекты и в целом хоть какой-то прогресс ощутим?




Недавно всплыло

7 Продолжение совета о системной фотосъёмке пластинок, часть 4 1 5 Колледж, вуз или Школа бюро, доступный кайф в архитектуре, как устроен Дизайн-буфет, когда откроются продажи Бюросайна 1