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. 20160124.CCPP详解体系(0003天)

    程序片段(01):HelloCGI.c 内容概要:CGI_HelloWorld #include <stdio.h> //01.CGI程序的编写规范 // (1).HTML文本格式声明后面 ...

  2. [转载] FFmpeg 错误 C4996: ‘avcodec_alloc_frame’: 被声明为已否决 解决方法

    在 Visual Studio 2013 下编写 FFmpeg 程序时出错,错误如下: 出错代码如下: 解决方法为:将 avcodec_alloc_frame() 替换为 av_frame_alloc ...

  3. RequireJS 2.0 正式发布（转）

    RequireJS发布了一个大版本,直接从version1.0.8升级到了2.0.随后的几小时James Burke又迅速的将版本调整为2.0.1,当然其配套的打包压缩工具r.js也同时升级到了2.0 ...

  4. 设置VMWARE通过桥接方式使用主机无线网卡上网(zz)

    环境:WIN7旗舰版,台式机,U盘无线上网卡. 虚拟软件:VMware9.0,虚拟系统:CentOS6.4 需要实现虚拟机以独立机形式工作和上网. 先介绍一下VMware网络设置的三种方式 1 Hos ...

  5. DOS攻击和DDOS攻击有啥区别啊

    DDOS是DOS攻击中的一种方法. DoS:是Denial of Service的简称,即拒绝服务,不是DOS操作系统,造成DoS的攻击行为被称为DoS攻击,其目的是使计算机或网络无法提供正常的服务. ...

  6. phpcms的增删改查操作整理

    一.查 ①select($where = '', $data = '*', $limit = '', $order = '', $group = '', $key='') /** * 执行sql查询 ...

  7. asp.net mvc下ckeditor使用

    资源下载:ckeditor 第一步,引入必须文件“~/ckeditor/ckeditor.js” 第二步,替换文本域 <%: Html.TextArea("Content", ...

  8. Linux文件系统 (Ubunt)

    Linux 文件系统是linux的一个十分基础的知识,同时也是学习linux的必备知识. 本文将站在一个较高的视图来了解linux的文件系统,主要包括了linux磁盘分区和目录.挂载基本原理.文件存储 ...

  9. Azure Cloud中的Log4Net设置

    这里的Cloud包含Worker Role和Web Role,Role是运行在云主机中的,这里的主机和VM有所不同,Windows Azure Role Architecture.我们并没有和本地服务 ...

  10. URAL-1997 Those are not the droids you're looking for 二分匹配

    题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1997 题意:记录了n个人进出门的时间点,每个人在房子里面待的时间要么小于等于a,要么大于 ...