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. Android解惑 - 为什么要用Fragment.setArguments(Bundle bundle)来传递参数(转)

    Fragment在Android3.0开始提供,并且在兼容包中也提供了Fragment特性的支持.Fragment的推出让我们编写和管理用户界面更快捷更方便了.   但当我们实例化自定义Fragmen ...

  2. OGNL valueStack StackContext(ActionContext)深入分析(转+个人理解)

    //还会补充 首先要有一个意识 ,为什么要了解这个?: struts2中的表单是怎么通过表达式(EL or OGNL)来传给Action 和 拿到Action的值的. 值栈(根)对象也可以直接使用EL ...

  3. phpcms还原被删除的栏目

    1.在这个目录下/caches/bakup/default导出文件category.sql 2.登录网站的数据管理页面phpmyadmin 3.导入数据库选择category.sql 4.登陆网站后台 ...

  4. (六) 6.3 Neurons Networks Gradient Checking

    BP算法很难调试,一般情况下会隐隐存在一些小问题,比如(off-by-one error),即只有部分层的权重得到训练,或者忘记计算bais unit,这虽然会得到一个正确的结果,但效果差于准确BP得 ...

  5. mysql 表空间及索引的查看方法

        CONCAT : concat() 方法用于连接两个或多个数组.    database : 数据库(11张) 数据库,简单来说是本身可视为电子化的文件柜——存储电子文件的处所,用户可以对文件 ...

  6. 【转】Github轻松上手4-常用的git命令

    转自:http://blog.sina.com.cn/s/blog_4b55f6860100zzih.html 附上一些git的常见命令: •    git remote add origin git ...

  7. ProgressBar及其子类

    1.ProgressBar(进度条组件) 派生了两个常用的组件:SeekBar和RatingBar. <1>通过style属性可以为ProgressBar指定风格,该属性可支持如下几个属性 ...

  8. mysql 添加索引后 在查询的时候是mysql就自动从索引里面查询了。还是查询的时候有单 独的参数查询索引？

    MYSQL在创建索引后对索引的使用方式分为两种:1 由数据库的查询优化器自动判断是否使用索引:2 用户可在写SQL语句时强制使用索引 下面就两种索引使用方式进行说明第一种,自动使用索引.数据库在收到查 ...

  9. InnoDB 引擎独立表空间 innodb_file_per_table

    使用过MySQL的同学,刚开始接触最多的莫过于MyISAM表引擎了,这种引擎的数据库会分别创建三个文件:表结构.表索引.表数据空间.我们可以将某个数据库目录直接迁移到其他数据库也可以正常工作.然而当你 ...

  10. Xcode5 支持 SVN 1.7

    Xcode升级了之后出现了各种问题,SVN升级到subversion 1.7后,Xcode自带有svn,版本是1.6,所以svn的1.6和1.7不兼容. 解决的办法,要么是降低系统的svn 版本,要么 ...