Это правило срабатывает, когда PageSpeed Insights обнаруживает, что на вашей веб-странице не указан видовый экран или что указанный видовой экран не подходит для разных устройств.
Видовые экраны управляют тем, как веб-страницы отображаются на мобильных устройствах. Если видовые экраны не указаны, мобильное устройство будет представлять веб-страницу по ширине типичного экрана рабочего стола и подгонять веб-страницу под размер экрана. Настраивая видовые экраны, вы можете контролировать ширину и масштабирование веб-страниц на разных устройствах.
Веб-страницы, оптимизированные для нормального отображения на мобильных устройствах, должны содержать в заголовке документа мета-видовые экраны, указывающие следующее:width=device-width, initial-scale=1
。
< meta name=viewport content="width=device-width, initial-scale=1 ">
width: 100px
)是以CSS像素為單位指定的。CSS像素與設(shè)備無關(guān)像素的比例即為網(wǎng)頁的比例系數(shù)或縮放級別。如果網(wǎng)頁未指定視口,則移動瀏覽器將以800至1024 CSS像素的后備寬度呈現(xiàn)該網(wǎng)頁。系統(tǒng)會調(diào)整網(wǎng)頁的比例系數(shù),以便網(wǎng)頁與顯示屏大小相協(xié)調(diào),這就要求用戶在與網(wǎng)頁互動之前先進行縮放。
元視口代碼會為瀏覽器提供指示,說明如何控制網(wǎng)頁的尺寸和比例,且文檔標(biāo)頭中應(yīng)包含此代碼。
Видовые экраны могут быть установлены на определенную ширину, напримерwidth=320
илиwidth=1024
. Хотя мы не рекомендуем это делать, это эффективно обеспечивает, чтобы веб-страницы с фиксированным размером отображались так, как это было задумано.
Использовать значение метавизуального интерфейсаwidth=device-width
Можно указать, что веб-страница соответствует ширине экрана (в пикселях, не связанных с устройством). Таким образом, веб-страницы могут перестроить контент, чтобы соответствовать разным размерам экрана.
有些瀏覽器(包括iOS和Windows Phone)在旋轉(zhuǎn)為橫向模式時會保持網(wǎng)頁寬度不變,并且會縮放(而非重排)網(wǎng)頁以填充屏幕。添加屬性initial-scale=1
Можно указать, что браузер устанавливает соотношение пикселей CSS к пикселям, не связанным с устройством, 1:1 (независимо от направления экрана устройства) и позволяет веб-страницам использовать всю поперечную ширину.
Веб-страницы должны быть адаптированы к разной ширине, чтобы использовать ответные видовые Соответствующие предложения см.Отрегулируйте размер содержимого в соответствии с настройками видового экранаРекомендаций.
minimum-scale
、maximum-scale
、user-scalable
Вы можете установить нижний и верхний пределы уровня масштабирования или полностью запретить пользователям масштабировать видовые экраны. Эти опции могут негативно сказаться на доступности, поэтому, как правило, вам следует избегать их использования.
@viewport
盡管元視口代碼受到了廣泛支持,但目前尚不屬于正式標(biāo)準(zhǔn)。此操作會作為CSS設(shè)備適配規(guī)范的一部分納入CSS。本規(guī)范最終定稿并廣泛實施之前,作者應(yīng)繼續(xù)使用元視口代碼,從而確保兼容性。您可以單獨使用,也可以與相應(yīng)的@viewport
Стиль сочетается для использования.
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.