Оптимизация сайта для Windows Mobile Phone

Методов оптимизации сайтов для мобильных устройств довольно много. Но для себя я пришёл к выводу, что под Windows Phone оптимизировать сложно. Браузер считает себя самым умным и масштабирует страничку как захочет. Помимо всего, он по разному масштабирует блоки расположенные в документе. Из-за чего так происходит я не узнал, так как ищу более универсальные методы оптимизации. Я не люблю когда странички ведут себя не предсказуемо.

В результате поиска я нашел, что у Майкрософта есть свои аналоги тригеров и мета-тэгов для управления отображением информации. Например, мета-тэг MobileOptimized указывает ширину на основе которой нужно расчитывать макет подготавливаемого сайта. У Эпла для Сафари предусмотрен мета-тэг viewport с аналогичным предназначением.

<meta name="MobileOptimized" content="width">

Код простенький и места на странице много не займёт. Ширина указывается в пикселах. Майкрософт рекомендует следующие значения:

• Smartphone: content="176"
• Pocker PC: content="240"
• Pocket PC with high DPI: content="480"

По умолчанию стоит максимальное разрешение при ландшафтном расположении экрана. Но на самом деле там разрешение ставится значительно больше. Из-за этого размер шрифтов очень маленький. Порой часть текстов без увеличения читать не возможно. И вообще такой мелкий текст очень дискомфортно читать с мобильного экрана.

Стоило начать экспериментировать со значением MobileOptimized и пришёл к выводу, что оно либо не работает, либо отрабатывается не корректно. Начал, так сказать с чистого листа и там всё было отлично. Странно, подумал я и начал копать глубже. Прошелся по разным сайтам и везде одни и те же результаты, странички с мизерным шрифтом. Но на сайтах Гугла и Яндекса выводятся странички оптимизированные для мобильного телефона. Сначала я решил, что происходит какой-то хитрый редирект или все лишние поля обрезаются в CSS. Но я долго над этим не заморачивался и просто подменил в Фаерфоксе UserAgent. После того как я пошерстил интересующие меня сайты, я понял, что поисковые гиганты выдают странички оптимизированные именно под мобильный браузер. Но почему они выдавали контент оптимизированный под iPhone и не делали уклона в сторону тэгов оптимизированных под Windows Mobile я не мог понять. Ради интереса я убрал мета-тэг viewport, который должен давать инструкцию для мобильного Safari. И что же вы думаете? Всё заработало как часики, мобильный эксплорер даже начал правильно отрабатывать CSS оптимизированный для работы на экранах с малым разрешением.

Мои эксперименты показали, что Майкрософт решил воспользоваться тэгами которые прописаны для продуктов Эпла и тем самым иметь довольно приятный козырь в рукаве. Ведь масса сайтов ориентируется на мобильный контент для iPhone и iPad. Соответственно, что масса народа уже вписала теги для Эпловских продуктов и Майкрософт ими активно пользуется. Лично я считаю, что этот подход очень даже положительно скажется на качестве предоставления контента. Но в другой же лапе, они ведь могли предупредить об этой интересной фишке.

И так, что мы теперь имеем? Мы имеем отличный инструмент для корректировки поведения сразу двумя платформами изменяя всего лишь один мета-тэг. Но в моём случае нельзя оставлять ранее использовавшийся подход. Теперь нужно закрепить не фиксированную ширину контента, а константу ширины конкретного девайса в текущем положении. Плюс необходимо разрешить пользователю менять масштаб. И конечный результат получился всего в одну строчку:

<meta name="viewport" content="width=device-width,user-scalable=1" />

Кстати, в Я.Метрике можно посмотреть количество клиентов которые смотрят сайт используя мобильные браузеры. И если повторных возвратов нет, то это может означать только то, что ваш сайт не подходит для использования на мобильном устройстве.

Тэги: SEO

Отредактировано:2020-09-25 20:33:28