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

}

利用HTML5开发Android(1)---Android设备多分辨率的问题的更多相关文章

  1. 利用HTML5开发Android

    ● Android设备多分辨率的问题 Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示 Android浏览器和WebView默认为mdpi.hdpi相当于mdpi的 ...

  2. 【转】利用HTML5开发Android

    ● Android设备多分辨率的问题 Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示 Android浏览器和WebView默认为mdpi.hdpi相当于mdpi的 ...

  3. 利用HTML5开发Android笔记（下篇）

    资源来自于www.mhtml5.com 杨丰盛老师成都场的PPT分享 一个很简明的demo 可以作为入门基础 学习的过程中做了点笔记 整理如下 虽然内容比较简单 但是数量还是比较多的 所以分了3篇 ( ...

  4. 利用HTML5开发Android笔记（中篇）

    资源来自于www.mhtml5.com 杨丰盛老师成都场的PPT分享 一个很简明的demo 可以作为入门基础 学习的过程中做了点笔记 整理如下 虽然内容比较简单 但是数量还是比较多的 所以分了3篇 ( ...

  5. 利用HTML5开发Android笔记（上篇）

    资源来自于www.mhtml5.com 杨丰盛老师成都场的PPT分享 一个很简明的demo 可以作为入门基础 学习的过程中做了点笔记 整理如下 虽然内容比较简单 但是数量还是比较多的 所以分了3篇 ( ...

  6. 利用HTML5开发Android(5)---HTML5地理位置服务在Android中的应用

    Android中 Java代码 //启用地理定位 webSettings.setGeolocationEnabled(true); //设置定位的数据库路径 webSettings.setGeoloc ...

  7. 利用HTML5开发Android(2)---Android中构建HTML5应用

    使用WebView控件 与其他控件的使用方法相同 在layout中使用一个<WebView>标签 WebView不包括导航栏,地址栏等完整浏览器功能,只用于显示一个网页 在WebView中 ...

  8. 利用HTML5开发Android(7)---HTML5本地存储之Database Storage

    在上一篇<HTML5本地存储之Web Storage篇>中,简单介绍了如何利用localStorage实现本地存储:实际上,除了sessionStorage和localStorage外,H ...

  9. 利用HTML5开发Android(6)---构建HTML5离线应用

    需要提供一个cache manifest文件,理出所有需要在离线状态下使用的资源例如 Manifest代码 CACHE MANIFEST #这是注释 images/sound-icon.png ima ...

随机推荐

  1. CodeIgniter的缓存设置

    数据库缓存 数据库缓存类允许你把数据库查询结果保存在文本文件中以减少数据库访问. 激活缓存需要三步: 在服务器上创建一个可写的目录以便保存缓存文件. 在文件 application/config/da ...

  2. (转)每天一个Linux命令(8): tar

    通过SSH访问服务器,难免会要用到压缩,解压缩,打包,解包等,这时候tar命令就是是必不可少的一个功能强大的工具.linux中最流行的tar是麻雀虽小,五脏俱全,功能强大. tar命令可以为linux ...

  3. xp关不了机

    自己测试:按第2点的设置既可成功1.点“开始→设置→控制面板→电源选项→高级电源管理”,如果你的机器支持高级电源管理功能,则选中“启用高级电源管理支持”:2.单击“开始”,并运行“regedit”,然 ...

  4. ORACLE 分区

    在建设数据仓库过程中,经常会有大量数据,短时间内表中数据量有限,查询性能还可以,但随着时间的延长,表中数据量迅速增加,查询速度就会变慢,性能下降,这时就要考虑对表进行分区. 一.oracle的分区 当 ...

  5. HBase 系统架构

    HBase是Apache Hadoop的数据库,能够对大型数据提供随机.实时的读写访问.HBase的目标是存储并处理大型的数据.HBase是一个开源的,分布式的,多版本的,面向列的存储模型.它存储的是 ...

  6. JQuery Mobile实现手机新闻浏览器（2）

    在上一篇文章中,已经讨论了程序的结构和页面的布局,并简单介绍了一些jQuery Mobile的使用技巧.在本篇文章中,笔者将继续完成我们web应用的新闻浏览器的设计. 程序的启动 我们现在来研究一下程 ...

  7. Linux共享内存(一)

    inux系统编程我一直看 <GNU/LINUX编程指南>,只是讲的太简单了,通常是书和网络上的资料结合着来掌握才比较全面 .在掌握了书上的内容后,再来都其他资料 . 原文链接 http:/ ...

  8. C#操作Excel，对Sheet插入次序的控制 (有待完善)

    C#对Excel文件的操作,插入工作表(Worksheet)的方法是 Workbook.Worksheets.Add().通常情况下,我们在EXCEL的工作薄中,使用菜单操作:插入一个新的工作表,那么 ...

  9. Java并发编程-volatile

    一. volatite 简述Java 语言提供了一种稍弱的同步机制,即 volatile 变量.用来确保将变量的更新操作通知到其他线程,保证了新值能立即同步到主内存,以及每次使用前立即从主内存刷新. ...

  10. jQuery 关于ScrollableGridPlugin.js（固定表头）插件的逐步解析

    以前写前台的时候需要用哪些效果从来都是有现成的东西拿来就用的,因为自己真的是有些懒,毫无探索精神,只重视结果,不追求过程. 这个ScrollableGridPlugin.js是从网上找到的一个具有固定 ...