利用HTML5开发Android(1)---Android设备多分辨率的问题
Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示
Android浏览器和WebView默认为mdpi。hdpi相当于mdpi的1.5倍 ldpi相当于0.75倍
三种解决方式:1 viewport属性 2 CSS控制 3 JS控制
1 viewport属性放在HTML的<meta>中
<SPAN style="FONT-SIZE: x-small">
<head>
<title>Exmaple</title>
<meta name=”viewport” content=”width=device-width,user-scalable=no”/>
</head>
</SPAN>
meta中viewport的属性如下
<SPAN style="FONT-SIZE: x-small">
<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] ,
target-densitydpi = [dpi_value | device-dpi |
high-dpi | medium-dpi | low-dpi]
"
/>
</SPAN>
2 CSS控制设备密度
为每种密度创建独立的样式表(注意其中的webkit-device-pixel-ratio 3个数值对应3种分辨率)
<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" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />
在一个样式表中,指定不同的样式
#header {
<SPAN style="WHITE-SPACE: pre"></SPAN>
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);
}
}
Html代码
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
3 JS控制
Android浏览器和WebView支持查询当前设别密度的DOM特性
window.devicePixelRatio 同样值有3个(0.75,1,1.5对应3种分辨率)
JS中查询设备密度的方法
Js代码
if (window.devicePixelRatio == 1.5) {
alert("This is a high-density screen");
} else if (window.devicePixelRation == 0.75) {
alert("This is a low-density screen");
}
利用HTML5开发Android(1)---Android设备多分辨率的问题的更多相关文章
- 利用HTML5开发Android
● Android设备多分辨率的问题 Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示 Android浏览器和WebView默认为mdpi.hdpi相当于mdpi的 ...
- 【转】利用HTML5开发Android
● Android设备多分辨率的问题 Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示 Android浏览器和WebView默认为mdpi.hdpi相当于mdpi的 ...
- 利用HTML5开发Android笔记(下篇)
资源来自于www.mhtml5.com 杨丰盛老师成都场的PPT分享 一个很简明的demo 可以作为入门基础 学习的过程中做了点笔记 整理如下 虽然内容比较简单 但是数量还是比较多的 所以分了3篇 ( ...
- 利用HTML5开发Android笔记(中篇)
资源来自于www.mhtml5.com 杨丰盛老师成都场的PPT分享 一个很简明的demo 可以作为入门基础 学习的过程中做了点笔记 整理如下 虽然内容比较简单 但是数量还是比较多的 所以分了3篇 ( ...
- 利用HTML5开发Android笔记(上篇)
资源来自于www.mhtml5.com 杨丰盛老师成都场的PPT分享 一个很简明的demo 可以作为入门基础 学习的过程中做了点笔记 整理如下 虽然内容比较简单 但是数量还是比较多的 所以分了3篇 ( ...
- 利用HTML5开发Android(5)---HTML5地理位置服务在Android中的应用
Android中 Java代码 //启用地理定位 webSettings.setGeolocationEnabled(true); //设置定位的数据库路径 webSettings.setGeoloc ...
- 利用HTML5开发Android(2)---Android中构建HTML5应用
使用WebView控件 与其他控件的使用方法相同 在layout中使用一个<WebView>标签 WebView不包括导航栏,地址栏等完整浏览器功能,只用于显示一个网页 在WebView中 ...
- 利用HTML5开发Android(7)---HTML5本地存储之Database Storage
在上一篇<HTML5本地存储之Web Storage篇>中,简单介绍了如何利用localStorage实现本地存储:实际上,除了sessionStorage和localStorage外,H ...
- 利用HTML5开发Android(6)---构建HTML5离线应用
需要提供一个cache manifest文件,理出所有需要在离线状态下使用的资源例如 Manifest代码 CACHE MANIFEST #这是注释 images/sound-icon.png ima ...
随机推荐
- 如何寻找google公司主导的开源项目
在googlecode页面的搜索框中:搜索 label:google ,结果列表中就会显示所有开源软件列表.或者直接点击这个连接:http://code.google.com/hosting/sear ...
- (六)6.17 Neurons Networks convolutional neural network(cnn)
之前所讲的图像处理都是小 patchs ,比如28*28或者36*36之类,考虑如下情形,对于一副1000*1000的图像,即106,当隐层也有106节点时,那么W(1)的数量将达到1012级别,为了 ...
- php 二维数组的排序
写这是之前一直二维数组排名困扰.自己写的好复杂. 正题: array_mutisort 官方帮助文档 <?php// 取得列的列表foreach ($data as $key => $ro ...
- Linux free -m 详细说明
一.free命令 free命令由procps.*.rpm提供(在Redhat系列的OS上).free命令的所有输出值都是从/proc/meminfo中读出的. 在系统上可能有meminfo(2)这个函 ...
- MongoDB Auto-Sharding(自动分片)入门介绍
MongoDB是10gen团队开发的一款面向文档的NoSQL数据库.最近一年多以来,MongoDB被越来越多的大型网站应用到生产环境中,比较著名的有Foursquare, bit.ly, Source ...
- ORACLE TM锁
Oracle的TM锁类型 锁模式 锁描述 解释 SQL操作 0 none 1 NULL 空 Select 2 SS(Row-S) 行级共享锁,其他对象只能查询这些数据行 Select for upda ...
- 【转】linux下mkisofs制作光盘映像cdrecord刻录光盘
1.制作光盘映像文件 $mkisofs -R -o /var/tmp/oracle.iso /home/oracle $mkisofs -o myiso.iso /home/oracle/data 补 ...
- IDEA14 Ultimate Edition注册码
分享几个license: (1) key:IDEA value:61156-YRN2M-5MNCN-NZ8D2-7B4EW-U12L4 (2) key:huangweivalue:97493-G3A4 ...
- ISO-8859-1
ISO-8859-1编码是单字节编码,向下兼容ASCII,其编码范围是0x00-0xFF,0x00-0x7F之间完全和ASCII一致,0x80-0x9F之间是控制字符,0xA0-0xFF之间是文字符号 ...
- yield汇编实现
yield汇编实现. #include <stdio.h #include <conio.h #include <iostream.h // // marks a location ...