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. Python [Leetcode 344]Reverse String

    题目描述: Write a function that takes a string as input and returns the string reversed. Example:Given s ...

  2. Myeclipse 安装Aptana3.2 插件

    转自(http://www.cnblogs.com/yinger/archive/2011/08/29/2157193.html) 安装步骤: 1.下载aptana3.2 Eclipse Plugin ...

  3. Linux Shell编程(3):数组

    http://snailwarrior.blog.51cto.com/680306/154704 BASH只支持一维数组,但参数个数没有限制.   声明一个数组:declare -a array (其 ...

  4. dede 替换后台两个文件去广告

    A:替换后台两个文件去广告  dede/templets路径下两个文件 1.index2.htm <!--This is IE DTD patch , Don't delete this lin ...

  5. （六）6.17 Neurons Networks convolutional neural network（cnn）

    之前所讲的图像处理都是小 patchs ,比如28*28或者36*36之类,考虑如下情形,对于一副1000*1000的图像,即106,当隐层也有106节点时,那么W(1)的数量将达到1012级别,为了 ...

  6. AndroidSdk离线下载

    http://dl.vmall.com/c00x42abt3# 关键字:android sdk 离线

  7. php 序列化（serialize）格式详解

    1．前言 PHP (从 PHP 3.05 开始)为保存对象提供了一组序列化和反序列化的函数:serialize.unserialize.不过在 PHP 手册中对这两个函数的说明仅限于如何使用,而对序列 ...

  8. [再寄小读者之数学篇](2014-11-19 $\sin(x+y)=\sin x\cos y+\cos x\sin y$)

    $$\bex \sin(x+y)=\sin x\cos y+\cos x\sin y. \eex$$ Ref. [Proof Without Words: Sine Sum Identity, The ...

  9. OFBIZ+ECLIPSE

    1. 首先要安装好OFBIZ,参考<OFBIZ安装>. 2. 安装ECLIPSE. 3. 安装FreeMarker插件,这是OFBIZ的模版引擎.在"Eclipse Market ...

  10. selenium + python 多浏览器测试

    selenium + python 多浏览器测试 支持库包 在学习 Python + Selenium 正篇之前,先来看下对多浏览器模拟的支持.目前selenium包中已包含webdriver,hel ...