让Web应用支持不同屏幕

最新推荐文章于 2023-06-08 15:50:40 发布

596785154

最新推荐文章于 2023-06-08 15:50:40 发布

阅读量351

点赞数

分类专栏： web-app成长中

web-app成长中专栏收录该内容

20 篇文章 0 订阅

订阅专栏

原始文章：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 name="viewport"
      content="
          height = [pixel_value | "device-height"] ,
          width = [pixel_value | "device-width"] ,
          initial-scale = float_value ,
          minimum-scale = float_value ,
          maximum-scale = float_value ,
          user-scalable = ["yes" | "no"]
          " />

例如，下面的< 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”，以表示这些样式分别用于低密度、中等密度或高密度屏幕的设备。
例如，您可以为每个密度创建单独的样式表:

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />

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

#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图像

用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");
}

596785154

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
让Web应用支持不同屏幕

原始文章：https://developer.android.com/guide/webapps/targeting.html由于Android适用于各种屏幕尺寸和像素密度的设备，所以您应该在web设计中考虑这些因素，以便您的web页面总是以适当的大小出现。当针对Android设备的web页面时，有两个主要因素需要考虑:The viewportviewport是为您的web页面提供可绘制区域的矩形区
复制链接

扫一扫