首页 > 代码库 > html适配Anroid手机

html适配Anroid手机

本文完全是翻译与总结谷歌官方的教程,已确保文档的正确性。

免得大家被五花八门的其他的资料弄混了,也没有系统行的学习。


一、设置窗口尺寸和适配屏幕分辨率

谷歌官方文档提到两个大的方面。

1.Viewport视图窗口

这个是html中设置的。主要是设置高度和宽度,还有初始的比列。这个宽度与高度将绝对html里面CSS中有多少个像素可用。

Viewport的宽度与屏幕的宽度没有决定性的关系。比如你的手机宽度是480PX但是你可以设置Viewport的宽度为960PX,这样一张800PX的图片就能一次性显示完整,因为很多浏览器比如chrome,会尽可能的缩放,缩小到能一屏幕能展现整个网页,也就是960PX的宽度。

注意:使用webView时并不会默认使用 全局概要模式。也就是自动缩小,用这个方法设置一下就行setUseWideViewPort().

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

<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"]
          " />
注意:除非你确定你的程序自动适配的很好,而且在最小尺寸下也能使用,否则不要关闭user-scalable。

2.屏幕分辨率

html在CSS中写的像素单位,在Android中等同于160DPI的手机。如果是320DPI的手机,就会对这个单位进行放大。比如如果一张300像素宽的图片,在160PI中能正常的显示,但是到了320DPI中的手机就会放大两倍,这个时候图片就会失真,模糊,有纹理。


二、通过CSS来适配

1.不同分辨率使用不同的CSS 

通过设置-webkit-device-pixel-ratio 这个属性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" />
2.或者通过不同的style和样式表,写法如下

#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);
    }
}
更多关于如何适配分辨率尤其是图片的适配可以参见 High DPI Images for Variable Pixel Densities.。

稍后如果有时间会把这个链接里面的内容也总结一下。

三、通过javascript来适配


写法如下:

Android浏览器或者WebView会通过 window.devicePixelRatio这个DOM文档定义的属性来指定当前的缩放比例。

默认的缩放比例是1.0.可以通过如下代码来获取比例,并作出对应的处理。

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