аукцион / FPR / donate / услуги / RSS / распечатать / вход 
Мой мир
Вконтакте
Одноклассники

Проблема с просмотром сайтов под iPhone

[20 апреля 2011 | 21 апреля 2011 | 22 апреля 2011]

В мои шаловливые лапы попал 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


Этот сайт использует файлы cookies, чтобы упростить вашу навигацию по сайту, предлагать только интересную информацию и упростить заполнение форм. Я предполагаю, что, если вы продолжаете использовать мой сайт, то вы согласны с использованием мной файлов cookies. Вы в любое время можете удалить и/или запретить их использование изменив настройки своего интернет-браузера.

Сообщайте мне о замеченных ошибках на: web@orcinus.ru. Все пожелания и советы будут учтены при дальнейшем проектировании сайта. Я готов сотрудничать со всеми желающими. В некоторых случаях, мнение автора может не совпадать с мнением автора! Phone: +7-902-924-70-49.

Рейтинг@Mail.ru LiveInternet Rambler's Top100 Яндекс.Метрика