Это шаги для воспроизведения проблемы (протестировано с Chrome 53.0.2785.101 и Chromium 53.0.2785.143, оба 64-битных, в Linux и Mac)
- Скопируйте этот простой 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›
- Откройте его с помощью Google Chrome в режиме устройства. Эмулируйте любой терминал или даже используйте адаптивный режим.
Чего я ожидал: крохотный текст. Из-за эффекта, описанного в этом видео: браузер по умолчанию установит ширину 980 пикселей (обычно ширина настольного браузера)
Что я получаю: текст обычного размера. Проверьте снимок экрана
Итак, первый вопрос: Почему я не вижу текст маленького размера, как это объясняется в видео?
ОБНОВЛЕНО. Я предполагаю: выполняет ли Chrome увеличение шрифта? сильный>
А теперь второй эксперимент. Просто раскомментируйте метатег области просмотра. Цель состоит в том, чтобы воспроизвести этот эффект масштабирования, вызванный отсутствием начального масштаб = 1. Итак, откройте веб-страницу в эмуляторе iPhone 5 и используйте портретный / ландшафтный режимы.
Чего я ожидал: эффект масштабирования объяснен в ссылке. Ширина экрана изменилась в ландшафтном режиме, поэтому без initial-scale = 1 я должен видеть увеличенный текст.
Что я получаю: размер текста остается одинаковым как в портретном, так и в ландшафтном режимах. Но я не применяю модификатор initial-scale = 1 ...
Проверить скриншоты
Итак, второй вопрос: почему мне не нужен initial-scale = 1, чтобы текст выглядел красиво в ландшафтном режиме?
В этом примере все происходит так, как я ожидал:
- Текст сначала крошечный (без мета-области просмотра)
Если я добавлю мета-область просмотра, все будет соответствовать.