мета-область просмотра не работает в режиме устройства Chrome

Это шаги для воспроизведения проблемы (протестировано с Chrome 53.0.2785.101 и Chromium 53.0.2785.143, оба 64-битных, в Linux и Mac)

  1. Скопируйте этот простой HTML-код и вставьте его в новый файл.

‹! DOCTYPE html›
‹html›
‹head›
‹meta charset = UTF-8›

‹! - раскомментируйте это. Он не работает в режиме Chrome-устройства (часть инструментов разработчика). Он специально не содержит initial-scale = 1 - ›
‹! - meta name = viewport content = width = device-width - ›

‹title› Initial Scale‹ / title ›
‹/head›
‹body›
‹p›
Lorem ipsum dolor sit amet, conctetur adipisicing elit. Optio in illo nisi totam eaque ipsam asperiores est nemo dolor ab Commodi corporis nostrum voluptas sint correpti de obcaecati dolores Expedita.
Lorem ipsum dolor sit amet, conctetur adipisicing elit. Минус voluptas facere odio fuga aliquam velit perferendis cum ut officiis ex quia delectus sint псевдоним soluta saepe libero dolor odit excitationem!
Lorem ipsum dolor sit amet, conctetur adipisicing elit. Perspiciatis aut Possimus Facere Neque Quia Maxime Voluptatum Eaque sed!
‹/p›
‹/body›
‹/html›

  1. Откройте его с помощью Google Chrome в режиме устройства. Эмулируйте любой терминал или даже используйте адаптивный режим.

Чего я ожидал: крохотный текст. Из-за эффекта, описанного в этом видео: браузер по умолчанию установит ширину 980 пикселей (обычно ширина настольного браузера)

Что я получаю: текст обычного размера. Проверьте снимок экрана нормальный текст в адаптивном режиме

Итак, первый вопрос: Почему я не вижу текст маленького размера, как это объясняется в видео?

ОБНОВЛЕНО. Я предполагаю: выполняет ли Chrome увеличение шрифта?

А теперь второй эксперимент. Просто раскомментируйте метатег области просмотра. Цель состоит в том, чтобы воспроизвести этот эффект масштабирования, вызванный отсутствием начального масштаб = 1. Итак, откройте веб-страницу в эмуляторе iPhone 5 и используйте портретный / ландшафтный режимы.

Чего я ожидал: эффект масштабирования объяснен в ссылке. Ширина экрана изменилась в ландшафтном режиме, поэтому без initial-scale = 1 я должен видеть увеличенный текст.

Что я получаю: размер текста остается одинаковым как в портретном, так и в ландшафтном режимах. Но я не применяю модификатор initial-scale = 1 ...

Проверить скриншоты

Портрет эмулятора iPhone 5  ландшафт эмулятора iPhone 5

Итак, второй вопрос: почему мне не нужен initial-scale = 1, чтобы текст выглядел красиво в ландшафтном режиме?

В этом примере все происходит так, как я ожидал:

  • Текст сначала крошечный (без мета-области просмотра)
  • Если я добавлю мета-область просмотра, все будет соответствовать.


person Jorge Arévalo    schedule 21.10.2016    source источник
comment
Где твой CSS? и отредактируйте свой вопрос, нажмите CTRL + M и вставьте свой код. Никто не хочет скачивать файл, чтобы увидеть ваш код.   -  person mlegg    schedule 22.10.2016
comment
Нет CSS. Просто тестируем метатег видового экрана. И уже обновлен, чтобы показать актуальный HTML-код.   -  person Jorge Arévalo    schedule 22.10.2016


Ответы (1)


Я думаю, это как-то связано с тем, как вы форматируете эти HTML-комментарии.

Без тега:

без метатега области просмотра

С тегом:

с метатегом области просмотра

Попробуйте добавить пробел между разделителями комментариев <!-- и --> и текстом комментария.

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

Также обратите внимание, что я устанавливаю как width, так и initial-scale, поэтому документ с рекомендациями рекомендовать это. Однако у меня это работает, когда я устанавливаю только width, как вы:

только со свойством ширины

person Kayce Basques    schedule 24.10.2016
comment
Ты был прав! Комментарии вызывали проблемы. Но я все еще смущен: я ожидал обратного. Я имею в виду: меньший текст без мета. Поскольку браузер считает, что контент создан для ширины 980 пикселей. Итак, он увеличен до этого размера. Об этом говорится в видео. Или я плохо это понял: youtube.com/watch?v=6P9uLyvcd3Y - person Jorge Arévalo; 25.10.2016
comment
Также спасибо за предложение о начальном масштабе. Но на самом деле я хотел показать эффект от того, что не его использовал. И его использование для меня не имеет значения. Я вижу то же самое с начальным масштабом и без него. Я ожидал эффекта масштабирования, описанного здесь: css-tricks.com/probably-use- initial-scale1 - person Jorge Arévalo; 25.10.2016
comment
Хорошо, протестировал его на реальном iPhone, и он показал поведение, которого я ожидал. Но в эмуляторе Chrome iPhone 6 этого не происходит. Не знаю, от Хрома это или нормально. - person Jorge Arévalo; 26.10.2016