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

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

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

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

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

}

html适配Anroid手机的更多相关文章

  1. 微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况

    背景 在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS 手机对于页面 title 的展示不一致,安卓 title 的显示不居中 页面的 title 只支持纯文本级别的样式控 ...

  2. Anroid 手机助手 详细解析 概述(二)

    这篇主要说一下手机插入之后的一些动作. 1)  捕获窗口消息 插入拔出一个USB设备windows 会给所有的窗口发送特定的消息,只要我们捕获这些消息就可以处理设备插入和拔出.需要注意的是插入或者拔出 ...

  3. 第148天：js+rem动态计算font-size的大小，适配各种手机设备

    需求: 在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案: 布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size. 假设设计稿是宽750px来做的,书写css方 ...

  4. 使用adb命令控制anroid手机

     adb工具即Android Debug Bridge(安卓调试桥) tools.它就是一个命令行窗口,用于通过电脑端与模拟器或者真实设备交互.在某些特殊的情况下进入不了系统或者需要自动化测试的时候, ...

  5. Android应用如何适配不同分辨率的手机

    主要分三块考虑   1 )界面配置   根据不同的分辨率,创建手机界面文件   例子: 在res下创建 layout-800x480            layout-480x320   并在各自不 ...

  6. Android中的适配方式

    1,图片适配(在不同像素密度的手机上,加载不同文件夹下的图片) 一套图(800*480,将截取的图片放置在hdpi下,小图(变形不明显), 大图(根据适配的手机,做单独的截取,比如有两款手机适配(做两 ...

  7. 用802.11n 加速，将android手机屏幕投影到win7电脑上

    在做Android应用开发的时候,经常需要将已经完成的应用展示给一同开发的小伙伴,然而一直感觉没有找到一种十分方便的办法.特别是看到了开发IOS的小伙伴在做展示的时候的方便.因为Apple既做PC,也 ...

  8. Android屏幕适配dp、px两套解决办法

    "又是屏幕适配,这类文章网上不是很多了吗?" 我也很遗憾,确实又是老问题.但本文重点对网上的各种方案做一个简短的总结,和具体使用方法. 若想了解具体Android设备适配的前世因果 ...

  9. web页面的适配问题

    一个web页面既要在宽屏上显示,又要在窄屏上显示,既要在电脑上显示,又要在手机上显示,这个适配问题相当的麻烦. 其实解决电脑与手机的适配问题,一般有两个思路:一个是做判断,根据不同条件在css和js做 ...

随机推荐

  1. IEEE浮点数float、double的存储结构

    众所周知,C的float.VB的Single都是32位浮点数变量类型(也叫单精度浮点数),C的double和VB的Double则都是64位的浮点数变量类型(也叫双精度浮点数).有些编译器还支持更屌的l ...

  2. QT窗口置顶/真透明/背景模糊/非矩形/跳过任务栏分页器/无边框/无焦点点击/焦点穿透

    qt 窗口置顶/真透明/背景模糊/非矩形/跳过任务栏分页器/无边框/无焦点点击/焦点穿透 窗口置顶qt 里是 setWindowFlags(Qt::WindowStaysOnTopHint)kde 里 ...

  3. Pathchirp—有效的带宽估计方法（二）

    上一个blog介绍了有效带宽估计方法:pathload.http://blog.csdn.net/ice110956/article/details/11126491. 做一个小小的总结:pathlo ...

  4. printk

    printk的日志级别定义如下(在linux/kernel.h中): #define KERN_EMERG "<0>"/*紧急事件消息,系统崩溃之前提示,表示系统不可用 ...

  5. TCP和UDP的"保护消息边界" （经典）

    在socket网络程序中,TCP和UDP分别是面向连接和非面向连接的.因此TCP的socket编程,收发两端(客户端和服务器端)都要有一一成对的socket,因此,发送端为了将多个发往接收端的包,更有 ...

  6. Pencil OJ 01 开发的准备

    操作系统 ubuntu-12.04.5-desktop-amd64.iso 基本应用 Node 0.12.7 MongoDB 3.0.4 Robomongo 0.8.4 Atom 参考资料 OJ hu ...

  7. 【开源框架】Android之史上最全最简单最有用的第三方开源库收集整理，有助于快速开发，欢迎各位网友补充完善

    链接地址:http://www.tuicool.com/articles/jyA3MrU 时间 2015-01-05 10:08:18  我是程序猿,我为自己代言 原文  http://blog.cs ...

  8. Python3 正则表达式特殊符号及用法（详细列表） http://bbs.fishc.com/thread-57691-1-1.html (出处: 鱼C论坛)

    http://bbs.fishc.com/thread-57691-1-1.html 留待查询用

  9. 文件打包bundle

    做项目时,经常会有一些资源拷来拷去会很麻烦,打包这些文件到项目里会方便很多! 首先把文件放到一个文件夹里                然后重命名文件夹为iToast.bundle 拖到项目里 如何访 ...

  10. 有关oppo蝴蝶解锁的三Ｄ技术

    oppo手机的界面设计也是很漂亮的.在很多界面中使用了3D技术塑造出了大量华丽的效果.在蝴蝶解锁中使用了两个对称的三D变幻,宛如蝴蝶翅膀上美丽的花纹.在受到用户点击后,随风缓慢上下扇动,充满浪漫的动感 ...