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");
}
html适配Anroid手机的更多相关文章
- 微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况
背景 在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS 手机对于页面 title 的展示不一致,安卓 title 的显示不居中 页面的 title 只支持纯文本级别的样式控 ...
- Anroid 手机助手 详细解析 概述(二)
这篇主要说一下手机插入之后的一些动作. 1) 捕获窗口消息 插入拔出一个USB设备windows 会给所有的窗口发送特定的消息,只要我们捕获这些消息就可以处理设备插入和拔出.需要注意的是插入或者拔出 ...
- 第148天：js+rem动态计算font-size的大小，适配各种手机设备
需求: 在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案: 布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size. 假设设计稿是宽750px来做的,书写css方 ...
- 使用adb命令控制anroid手机
adb工具即Android Debug Bridge(安卓调试桥) tools.它就是一个命令行窗口,用于通过电脑端与模拟器或者真实设备交互.在某些特殊的情况下进入不了系统或者需要自动化测试的时候, ...
- Android应用如何适配不同分辨率的手机
主要分三块考虑 1 )界面配置 根据不同的分辨率,创建手机界面文件 例子: 在res下创建 layout-800x480 layout-480x320 并在各自不 ...
- Android中的适配方式
1,图片适配(在不同像素密度的手机上,加载不同文件夹下的图片) 一套图(800*480,将截取的图片放置在hdpi下,小图(变形不明显), 大图(根据适配的手机,做单独的截取,比如有两款手机适配(做两 ...
- 用802.11n 加速，将android手机屏幕投影到win7电脑上
在做Android应用开发的时候,经常需要将已经完成的应用展示给一同开发的小伙伴,然而一直感觉没有找到一种十分方便的办法.特别是看到了开发IOS的小伙伴在做展示的时候的方便.因为Apple既做PC,也 ...
- Android屏幕适配dp、px两套解决办法
"又是屏幕适配,这类文章网上不是很多了吗?" 我也很遗憾,确实又是老问题.但本文重点对网上的各种方案做一个简短的总结,和具体使用方法. 若想了解具体Android设备适配的前世因果 ...
- web页面的适配问题
一个web页面既要在宽屏上显示,又要在窄屏上显示,既要在电脑上显示,又要在手机上显示,这个适配问题相当的麻烦. 其实解决电脑与手机的适配问题,一般有两个思路:一个是做判断,根据不同条件在css和js做 ...
随机推荐
- jquery.zclip—复制剪贴板（兼容各大浏览器）
开始前说两句 WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内 ...
- Delphi资源大全
A curated list of awesome Delphi frameworks, libraries, resources, and shiny things. Inspired by awe ...
- 【JSP】JSTL核心标签库的使用方法和示例
JSTL 核心标签库 JSTL 核心标签库标签共有13个,功能上分为4类: 1. 表达式控制标签:out.set.remove.catch 2. 流程控制标签:if.choose.when.other ...
- C++将文件内容一次性读入内存
结合字符串流,将文件中的内容一次性读入内存,代码如下: #include <string> using std::ostringstream; using std::ifstream; u ...
- LDF文件过大的解决办法
检查扎兰屯服务器的时候,发现其中一个分区的原空间有300多个G,但只余下了80多个G.检查了一下,发现某库ldf文件过大,竟然达到了280多个G. 这如何得了,再这样下去,硬盘怎能受得了? 尝试用收缩 ...
- 简单字符串处理 hdu1062 Text Reverse
虽然这个题目一遍AC,但是心里还是忍不住骂了句shit! 花了一个小时,这个题目已经水到一定程度了,但是我却在反转这个操作上含糊不清,并且还是在采用了辅助数组的情况下,关系的理顺都如此之难. 其实我是 ...
- 转：c语言EOF是什么？（及getchar()和putchar用法）
我学习C语言的时候,遇到的一个问题就是EOF. 它是end of file的缩写,表示"文字流"(stream)的结尾.这里的"文字流",可以是文件(file) ...
- stringstream clear()的疑问 - yuanshuilee的日志 - 网易博客
stringstream clear()的疑问 - yuanshuilee的日志 - 网易博客 stringstream clear()的疑问 2013-09-05 08:43:13| 分类: ...
- java.lang.NoClassDefFoundError: org/apache/lucene/analysis/synonym/SynonymFilter
2013-6-24 13:28:51 org.apache.solr.common.SolrException log 严重: java.lang.NoClassDefFoundError: org/ ...
- [置顶] c#验证码识别、图片二值化、分割、分类、识别
c# 验证码的识别主要分为预处理.分割.识别三个步骤 首先我从网站上下载验证码 处理结果如下: 1.图片预处理,即二值化图片 *就是将图像上的像素点的灰度值设置为0或255. 原理如下: 代码如下: ...