ilyachalov (ilyachalov) wrote,
ilyachalov
ilyachalov

Categories:

Адаптация HTML-страницы для мобильника 2

Начало:
1. Инструмент разработчика Issues в браузере
2. Настройка веб-сервера из набора IIS, web.config, заголовки HTTP

Продолжаю разбирать замечания инструмента разработчика «Issues» браузера (у меня — «Microsoft Edge» на движке «Chromium») к моей тестовой HTML-странице.

Замечание, которое помечено как «ошибка» (по-английски «Error»):

A 'viewport' meta element was not specified.


Мне эта тема уже знакома, я три года назад писал пост по этому поводу, в котором разбирался, как говорится, «на пальцах»:

Адаптация HTML-страницы для мобильника

Там я подходил к этому вопросу, ориентируясь на руководства от компании «Google», касающиеся оптимизации сайта для мобильных устройств, онлайн-проверки оптимизации сайта под мобильник, адаптивного дизайна. Те ссылки и сейчас остаются актуальными.

Инструмент разработчика «Issues» браузера посылает читать несколько в другом направлении:

https://webhint.io/docs/user-guide/hints/hint-meta-viewport/
(Статья «Correct Viewport»)

https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
(Статья «Using the viewport meta tag to control layout on mobile browsers»)

Посмотреть, как HTML-страница будет выглядеть на мобильном устройстве, можно в любом браузере на движке «Chromium», открыв нужную HTML-страницу и вызвав для нее панель инструментов разработчика (F12). Там в левом верхнем углу есть кнопка (вторая слева), которая называется «Toggle device emulation». С ее помощью можно переключиться на эмуляцию мобильного устройства и обратно, в режим настольного компьютера.

Как я и описывал три года назад, без определения соответствующего HTML-элемента meta с атрибутом name="viewport" HTML-страница, которая хорошо выглядит на дисплее настольного компьютера, на экране мобильника будет показана так, что текст HTML-страницы будет выглядеть очень мелко и его почти невозможно будет разобрать. Начинать решать эту проблему все известные мне источники предлагают с вставки следующего HTML-элемента в заголовочную часть HTML-страницы:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Этот метод подойдет для многих HTML-страниц. Для более сложных случаев нужно читать вышеупомянутые статьи и разбираться с адаптивным дизайном (википедия).

Вставка этого HTML-элемента избавляет от вышеупомянутого замечания инструмента разработчика «Issues» браузера.
Tags: Инструмент, Образование, Программирование, Сайтостроение
Subscribe

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 0 comments