Это правило срабатывает, когда PageSpeed Insights обнаруживает, что на вашей веб-странице не указан видовый экран или что указанный видовой экран не подходит для разных устройств.

Обзор

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

?

Слева: веб-страница, для которой не указан мета-видовый экран.

建議

Веб-страницы, оптимизированные для нормального отображения на мобильных устройствах, должны содержать в заголовке документа мета-видовые экраны, указывающие следующее:width=device-width, initial-scale=1。

其他信息

Терминология:

• Аппаратные пиксели: физические пиксели монитора Например, горизонтальный аппаратный пиксель экрана, к которому подходит iPhone 5, составляет 640.
• 設(shè)備無關(guān)像素(dip)：在正常視距下，符合統(tǒng)一參考像素Соотношение пикселей устройства, этот пиксель имеет практически одинаковый размер на всех устройствах. Ширина независящих от устройства пикселей iPhone 5 составляет 320.
• CSS像素：用于頁面布局的單位，由視口控制。樣式的像素尺寸（例如width: 100px）是以CSS像素為單位指定的。CSS像素與設(shè)備無關(guān)像素的比例即為網(wǎng)頁的比例系數(shù)或縮放級(jí)別。

Настольная версия веб-страницы на мобильных устройствах

如果網(wǎng)頁未指定視口，則移動(dòng)瀏覽器將以800至1024 CSS像素的后備寬度呈現(xiàn)該網(wǎng)頁。系統(tǒng)會(huì)調(diào)整網(wǎng)頁的比例系數(shù)，以便網(wǎng)頁與顯示屏大小相協(xié)調(diào)，這就要求用戶在與網(wǎng)頁互動(dòng)之前先進(jìn)行縮放。

元視口代碼

元視口代碼會(huì)為瀏覽器提供指示，說明如何控制網(wǎng)頁的尺寸和比例，且文檔標(biāo)頭中應(yīng)包含此代碼。

固定寬度的視口

Видовые экраны могут быть установлены на определенную ширину, напримерwidth=320илиwidth=1024. Хотя мы не рекомендуем это делать, это эффективно обеспечивает, чтобы веб-страницы с фиксированным размером отображались так, как это было задумано.

зрительный интерфейс ответной реакции

Использовать значение метавизуального интерфейсаwidth=device-widthМожно указать, что веб-страница соответствует ширине экрана (в пикселях, не связанных с устройством). Таким образом, веб-страницы могут перестроить контент, чтобы соответствовать разным размерам экрана.

有些瀏覽器（包括iOS和Windows Phone）在旋轉(zhuǎn)為橫向模式時(shí)會(huì)保持網(wǎng)頁寬度不變，并且會(huì)縮放（而非重排）網(wǎng)頁以填充屏幕。添加屬性initial-scale=1Можно указать, что браузер устанавливает соотношение пикселей CSS к пикселям, не связанным с устройством, 1:1 (независимо от направления экрана устройства) и позволяет веб-страницам использовать всю поперечную ширину.

Веб-страницы должны быть адаптированы к разной ширине, чтобы использовать ответные видовые Соответствующие предложения см.Отрегулируйте размер содержимого в соответствии с настройками видового экранаРекомендаций.

Прочие меры предосторожности

Пожалуйста, избегайте использованияminimum-scale、maximum-scale、user-scalable

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

@viewport

盡管元視口代碼受到了廣泛支持，但目前尚不屬于正式標(biāo)準(zhǔn)。此操作會(huì)作為CSS設(shè)備適配規(guī)范的一部分納入CSS。本規(guī)范最終定稿并廣泛實(shí)施之前，作者應(yīng)繼續(xù)使用元視口代碼，從而確保兼容性。您可以單獨(dú)使用，也可以與相應(yīng)的@viewportСтиль сочетается для использования.

Ресурсы:

• В руководстве по веб-контенту SafariConfiguring the Viewport (Настройка видового экрана)一文。
• 怪異模式“雙視口記”：第一部分和第IIЧастично.
• Опубликовано в издании A List ApartA Pixel Identity Crisis (Кризис идентичности, вызванный определением пикселей)Одна статья.
• OperaИMozillaВизуальный экран, приведенный выше.
• Опубликовано в HTML5 RocksCreating a Mobile — First Responsive Web Design (создание веб-дизайна с опережающим мобильным ответом)Одна статья.

Except as otherwise noted, the content of this page is licensed under the?Creative Commons Attribution 3.0 License, and code samples are licensed under theApache 2.0 License. For details, see ourSite Policies.