让Web应用支持不同屏幕

水深无声 2022-06-07 00:29 142阅读 0赞

原始文章：[https://developer.android.com/guide/webapps/targeting.html][https_developer.android.com_guide_webapps_targeting.html]

由于Android适用于各种屏幕尺寸和像素密度的设备，所以您应该在web设计中考虑这些因素，以便您的web页面总是以适当的大小出现。

当针对Android设备的web页面时，有两个主要因素需要考虑:

**The viewport**

viewport是为您的web页面提供可绘制区域的矩形区域。您可以指定几个viewport属性，比如它的大小和初始规模。最重要的是视图端口宽度，它定义了从web页面的角度(可用的CSS像素数量)可用的水平像素的总数。

**The screen density**

在Android上，WebView类和大多数web浏览器将CSS像素值转换为density - independent像素值，因此您的web页面与中等密度屏幕(大约160dpi)的大小相同。然而，如果图形是你的网页设计的一个重要元素，你应该密切关注在不同密度上发生的缩放，因为在320dpi屏幕上有一个300px宽的图像会被放大(使用更多的物理像素/ CSS像素)，这可以产生工件(模糊和像素化)。

# 指定窗口的属性 #

viewport是您的web页面绘制的区域。尽管viewport的总可见区域与屏幕的大小相匹配，但当它放大的时候，viewport有它自己的像素尺寸，它可以提供给web页面。例如，尽管一个设备屏幕可能具有480像素的物理宽度，但viewport的宽度可以达到800像素。这样，当viewport scale为1.0时，在屏幕上可以完全看到800像素宽的网页。大多数基于Android(包括Chrome)的web浏览器默认设置了一个大尺寸的viewport(被称为“宽视角模式”，大约为980px宽)。许多浏览器在默认情况下也尽可能缩小，以显示完整的viewport宽度(称为“overview模式”)。

**注意:当您的页面在WebView中呈现时，默认情况下，它不会使用宽视图模式(页面出现在完全缩放下)。您可以使用setUseWideViewPort()启用宽视图模式。**

您可以使用< meta name=”viewport “>来定义web页面的viewport的属性，例如宽度和初始缩放级别。在您的文档< head >中添加标记。

下面的语法显示了所有受支持的viewport属性和每一个所接受的值的类型:

例如，下面的< meta >标记指定了viewport宽度应该与设备屏幕的宽度完全匹配，并且缩放的能力应该被禁用:

<head>
        <title>Example</title>
        <meta name="viewport" content="width=device-width, user-scalable=no" />
    </head>

当优化你的移动设备网站时，你通常应该设置宽度为“device-width”，这样尺寸正好适合所有设备，然后使用CSS媒体查询来灵活地调整布局以适应不同的屏幕尺寸。

**注意:只有当你确定你的网页布局是灵活的，内容符合小屏幕的宽度时，你才应该禁用用户缩放.**

# 用CSS锁定设备密度 #

Android浏览器和WebView支持一个CSS媒体功能，允许你为特定的屏幕密度创建样式—— -webkit-device-pixel-ratio CSS媒体功能样式。您对该特性应用的值应该是“0.75”、“1”或“1.5”，以表示这些样式分别用于低密度、中等密度或高密度屏幕的设备。  
例如，您可以为每个密度创建单独的样式表:

或者，在一个样式表中指定不同的样式:

#header { background:url(medium-density-image.png); }
    
    @media screen and (-webkit-device-pixel-ratio: 1.5) {
        /* CSS for high-density screens */
        #header { background:url(high-density-image.png); }
    }
    
    @media screen and (-webkit-device-pixel-ratio: 0.75) {
        /* CSS for low-density screens */
        #header { background:url(low-density-image.png); }
    }

有关处理不同屏幕密度的更多信息，特别是图像，参见[用于可变像素密度的高dpi图像][dpi]

# 用JavaScript锁定设备密度 #

Android浏览器和WebView支持一个DOM属性可以查询当前设备的密度——devicePixelRatio DOM属性。此属性的值指定当前设备使用的比例因子。例如，如果窗口的值。devicePixelRatio为“1.0”，该设备被认为是中密度设备，默认情况下不应用缩放;如果值为“1.5”，则该设备被认为是高密度的设备，默认情况下该页面被缩放1.5倍;如果值为“0.75”，则该设备被认为是低密度设备，默认情况下，该页面将按0.75 x的比例缩放。当然,Android浏览器的扩展和WebView应用是基于网页的目标中描述密度与部分有关目标密度定义窗口,默认的目标是中密度,但你可以改变目标如何影响您的web页面是不同的屏幕密度的比例。  
例如，下面是如何使用JavaScript查询设备密度:

if (window.devicePixelRatio == 1.5) {
      alert("This is a high-density screen");
    } else if (window.devicePixelRatio == 0.75) {
      alert("This is a low-density screen");
    }

[https_developer.android.com_guide_webapps_targeting.html]: https://developer.android.com/guide/webapps/targeting.html
[dpi]: http://blog.csdn.net/zcn596785154/article/details/78235707