利用HTML5开发Android(1)---Android设备多分辨率的问题
2024-10-15 16:00:12
Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示
Android浏览器和WebView默认为mdpi。hdpi相当于mdpi的1.5倍 ldpi相当于0.75倍
三种解决方式:1 viewport属性 2 CSS控制 3 JS控制
1 viewport属性放在HTML的<meta>中
Html代码
<SPAN style="FONT-SIZE: x-small">
<head>
<title>Exmaple</title>
<meta name=”viewport” content=”width=device-width,user-scalable=no”/>
</head>
</SPAN>
meta中viewport的属性如下
Html代码
<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种分辨率)
Html代码
<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" />
在一个样式表中,指定不同的样式
Html代码
#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");
}
最新文章
- HDU 1848 SG函数博弈
- Safari 快捷键
- Codeforces Round#250 D. The Child and Zoo(并差集)
- 【poj 3080】Blue Jeans(字符串--KMP+暴力枚举+剪枝)
- iOS网络-01-NSURLRequest与NSURLConnection
- ckeditor的详细配置
- 【加解密】关于DES加密算法的JAVA加密代码及C#解密代码
- 数据库设计(字段)中的char、varchar、text和nchar、nvarchar、ntext的区别
- sql语句判断方法之一
- 你所不知道的string.xml
- Swift: 下标(Subscripts)
- Qt在VS2013或Qt Creator 中的控制台输出方式设置
- Codeforces 713C Sonya and Problem Wihtout a Legend(单调DP)
- GDB十几分钟教程
- Android笔记: ViewPager基本用法
- python之定义参数模块argparse(一)基本使用
- Kali-Dos洪水攻击之Hping3
- HDU5511 : Minimum Cut-Cut
- k8s学习笔记之五:Pod资源清单spec字段常用字段及含义
- Activity总结
热门文章
- 使用phantomjs生成网站快照
- [转载] 老版本ubuntu 更新源
- MongoDB的启动
- Symfony2学习笔记之表单
- [转]几个开源的.net界面控件
- 简单地Android中图片的三级缓存机制
- 提高zxing生成二维码的容错率及zxing生成二维码的边框设置
- Media Player 把光盘中的内容拷贝出来的方法
- redhat Enterprise Linux Server release 7.2(Maipo) 安装redis-stat
- 虚幻4以及DX12将允许开发者利用Xbox One的更多性能(转)