Проблема с просмотром сайтов под iPhone
В мои шаловливые лапы попал iPhone. Практически сразу решил на нем поюзать интернет. Заметил интересную особенность, все сайты выводятся микроскопическим шрифтом. Решил проверить свой сайт и получил аналогичный результат. После чего начал искать решение данной проблемы в сети. Причину такого поведения и вариант решения нашел довольно быстро.
Причина подобного поведения заключается в том, что Safari на iPhone, сначала подгоняет страничку так, будто она открывалась в браузере на нормальном мониторе с разрешением 980 пикселов по ширине экрана и потом масштабирует до своих реальных размеров экрана. А размеров у iPhone два, в зависимости от расположения: портретное или альбомное.
Методов решения данной проблемы оказалось несколько. Для себя же я выбрал самый простой метод. Достаточно указать один мета-тэг viewport.
<meta name="viewport" content="width=device-width" />
Порывшись в чужих проектах, я обнаружил, что этот тег устанавливает кто как хочет, где 780, а где 760. Так, что тут можно подбирать экспериментальным путем. Мой сайт вполне корректно смотрится на 780 пикселах. По этому мой вариант этого мета-тега выглядит так:
<meta name="viewport" content="width=780" />
Конечно, можно поступить еще жестче и установить параметры так, что будет казаться, что наш сайт является нативным приложением. Для этого нужно установить максимальную ширину экрана, коэффициент масштабирования зафиксировать в единицу и запретить пользователю самостоятельно масштабировать размеры странички. Код мета-тэга будет выглядеть следующим образом.
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
Вот и всего-то делов. Теперь ваш сайт будет корректно отображаться на устройствах пользователей.
Иконка для iPhone на экране Home
Во время исследования вопроса о некорректном отображении страничек в Safari на iPhone, я натолкнулся еще на один интересный мета-тэг, поискал в интернете его описание и хочу про него упомянуть парой строчек.
Пользователи iPhone могут переносить ярлыки на интересующие их сайты на экран Home, своих телефонов. При переносе ярлычка создается иконка с изображением скриншота сайта, но у владельцев сайтов есть возможность предоставить свою собственную иконку. Для этого необходимо создать картинку размерами 57x57 пикселей и сохранить её в формате PNG. Место расположения картинки не критично, хоть на другом сервере. Подключается эта иконка следующим мета-тегом.
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
Адресация в этом мета-теге может быть относительная и абсолютная.
Кстати, при создании картинки обратите внимание на то, что при добавлении этой картинки на экран Home, iPhone самостоятельно добавляет глянцевый отблеск и скругляет уголки вашей картинки. Не забывайте учитывать эту особенность при создании своей собственной иконки.
Отредактировано:2020-10-01 06:27:17