上一篇我们学习了(1.[WebView学习之中的一个]:Web Apps简单介绍),今天我们来继续学习。

(博客地址:http://blog.csdn.net/developer_jiangqq),转载请注明。

Author:hmjiangqq

Email:jiangqqlmj@163.com

由于Android设备有非常多分辨率，不一样的屏幕以及像素密度。所以在Web页面的设计过程中，应该考虑网页总能显示合适的大小。

在你为Android设备开发Web页面是，我们须要考虑下面两个因素:

1.:视图窗口(The
ViewPort)

The Viewport是一个能够进行缩放的矩形形状的Web页面。你能够设置多个ViewPort属性比如:尺寸大小以及初始化缩放比例。最重要的是the
view port width(视图的宽度)，这个定义了整个Web页面的水平像素大小。

2:屏幕密度(The Screen Density)

在Android设备上面WebView控件和绝大多数Web浏览器一样都能够把CSS的像素值转换成以密度为基础的独立像素值。所以你的Web页面在中等密度屏幕(比如:160dpi)上面会呈现同样的大小。假设你的Web设计中图片是最重要的，那么你更加要关注不同分辨率密度的换算。由于300px宽度的会在320dpi屏幕上面会进行放大。

(一):指定窗体属性(Specifying
Viewport Properties )

窗口是一个Web页面的区域，即时当我们进行缩放的时候可视窗口还是可以匹配屏幕的大小。比如:即时当我们的设备的物理宽度是480px(像素),viewport的宽度是800px(像素),当Viewport为正常缩放比例是(1.0)该基于800px设备的web页面也会全然充分的显示在屏幕上面。Android中绝大多数Web浏览器(比如:Chrome)的会默认设置一个大尺寸视图(该被称为"宽视图模式"-一般为980px)。非常多浏览器也尽可能的缩小，来默认显示完整的大小(该被称为:概要模式)

[注]:当使用WebView来显示页面时，该默认不启用宽视图模式(这样页面会充分的放大。不会适配屏幕)，当然你能够调用setUseWideViewPort()来启用宽视图模式

你能够在html文档的<head>中使用<metaname="viewport"…>标签为你的Web页面定义视图的属性，比如:宽度和初始化缩放比例。

以下是Viewport全部支持的属性以及能够设置的值

<span style="font-size:18px;"><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"]

          " />

</span>

比如:在以下<meta>标签中定义viewport宽度全然适配屏幕的宽度，而且设置用户不能进行缩放

<span style="font-size:18px;"><head>

    <title>Example</title>

    <meta name="viewport" content="width=device-width, user-scalable=no" />

</head>

</span>

当为移动设备优化网页。通过我们应该设置width为"device-width"，这样尽可能的来适配全部的屏幕。然后使用CSS样式文件来为不同的屏幕分辨率调整布局。

[注]:当你确定你的Web页面来显示在小分辨率屏幕上面，你应该调用setUseWideViewPort(false)来禁用宽视图模式。

(二)针对不同屏幕使用CSS样式(Targeting
Device Density with CSS)

Android浏览器以及WebView都支持CSS样式文件,这样你能够为特殊屏幕密度创建带有"-webkit-device-pixel-ratio"的CSS样式文件。这个属性的可取值为"0.75","1"或者"1.5",该分别代表低密度，中密度。以及高密度屏幕。

比如:你能够为每个密度创建单独的样式文件:

<span style="font-size:18px;"><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" />

</span>

或者能够在一个样式文件里制定不同的风格

<span style="font-size:18px;">#header {

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

    }

}

</span>

很多其它处理不同屏幕分辨率。特殊资源图片的信息。你能够查看:High
DPI Images forVariable Pixel Densities.

(三):针对不同的屏幕分辨率来使用JavaScript

Android浏览器和WebView都支持Dom属性，这样我们能够使用window.devicePixelRation该DOM属性来查询当前设备的密度。该属性的值代表当前设置的缩放比例因子。比如:假设window.devicePixelRatio的值为1.0，那么此时设备被觉得是中等密度屏幕而且默认不会进行缩放。假设该值为1.5，那么此时设备被觉得是高密度屏幕而且会进行1.5倍放大。

假设该值为0.75,那么此时设备被觉得是低密度屏幕而且会进行0.75缩小。当然Android浏览器和WebView的缩放比例都会基于现实Web页面的设备的密度，默认一般都会中等密度，可是你能够为不同屏幕密度来进行改变。

比如:以下就是使用Javascript来查询设备密度

<span style="font-size:18px;">if (window.devicePixelRatio == 1.5) {

  alert("This is a high-density screen");

} else if (window.devicePixelRatio == 0.75) {

  alert("This is a low-density screen");

}

</span>

[WebView学习之二]:使用Web Apps 支持不同分辨率屏的更多相关文章

  1. spring boot 学习笔记(二) 构建web支持jsp

    一.必须将项目打包成war包 <packaging>war</packaging> 二.pom.xml加入依赖包 <dependency> <groupId& ...

  2. Java嵌入式数据库H2学习总结(二)——在Web应用程序中使用H2数据库

    一.搭建测试环境和项目 1.1.搭建JavaWeb测试项目 创建一个[H2DBTest]JavaWeb项目,找到H2数据库的jar文件,如下图所示: H2数据库就一个jar文件,这个Jar文件里面包含 ...

  3. Web Service学习之二：Web Service（for JAVA）的几种框架

    在讲Web Service开发服务时,需要介绍一个目前开发Web Service的几个框架,分别为Axis,axis2,Xfire,CXF以及JWS(也就是前面所述的JAX-WS,这是Java6发布所 ...

  4. Quartz定时任务学习（二）web应用

    web中使用Quartz 1.首先在web.xml文件中加入 如下内容(根据自己情况设定) 在web.xml中添加QuartzInitializerServlet,Quartz为能够在web应用中使用 ...

  5. 【Spring Boot学习之二】WEB开发

    环境 Java1.8 Spring Boot 1.3.2 一.静态资源访问 动静分离:动态服务和前台页面图片分开,静态资源可以使用CDN加速;Spring Boot默认提供静态资源目录位置需置于cla ...

  6. [WebView学习之三]:使用WebView来创建Apps

    上一篇我们学习了([WebView学习之二]:使用Web Apps 支持不同分辨率屏),今天我们来继续学习. (博客地址:http://blog.csdn.net/developer_jiangqq) ...

  7. [WebView五学习]:调试Web Apps

    上一篇我们学习了([WebView学习之四]:迁移到Android4.4版本号的WebView),今天我们来继续学习. (博客地址:http://blog.csdn.net/developer_jia ...

  8. 构建高可用web站点学习（二）

    web站点的缓存学习 缓存在web应用里面十分常见,也有各种各样的缓存,从请求开始一直到代码处理的阶段都可以采取缓存.下面就逐一介绍: 一.客户端缓存(浏览器和http方面) 前端页面缓存主要遵循ht ...

  9. [WebView其中一项研究]:Web Apps基本介绍

    今天,我们开始了解WebView,以及Web Apps发展,从主要内容Android实际的例子来解释正式文件和后续. (博客地址:http://blog.csdn.net/developer_jian ...

随机推荐

  1. ACM_Cipher（异或运算）

    Cipher Time Limit: 2000/1000ms (Java/Others) Problem Description: 只剩两个小时就要正式开始第一次月赛了,大四师兄决定还是来出一道,找点 ...

  2. Ambari是啥？主要是干啥的？

    简单来说,Ambari是一个拥有集群自动化安装.中心化管理.集群监控.报警功能的一个工具(软件),使得安装集群从几天的时间缩短在几个小时内,运维人员从数十人降低到几人以内,极大的提高集群管理的效率. ...

  3. SQL基本操作——日期函数

    SQL日期:当我们处理日期时,最难的任务恐怕是确保所插入的日期的格式,与数据库中日期列的格式相匹配.只要数据包含的只是日期部分,运行查询就不会出问题.但是,如果涉及时间,情况就有点复杂了.在讨论日期查 ...

  4. Nginx 重新加载日志配置

    最近在写一个nginx日志的切割脚本,切割完后,发现可以不重启服务,而直接重新加载日志配置文件的命令 [   kill -USR1 $nginx.pid   ],但是不知道 -USR1这个参数是什么意 ...

  5. linux下如何限制普通用户更改密码

    问题描述: 为了方便linux管理员对所有用户的进行管理,如何限制普通用户更改密码? 解决方法: 禁止普通用户更改密码: /usr/bin/passwd 若要允许普通用户更改密码: /usr/bin/ ...

  6. Java面向对象多态

    Java面向对象多态 7.2对象 7.2.1创建对象 对象是类的实例 类的名称 对象名称 = new 类的名称(); 7.3继承 继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的实例域 ...

  7. html 报告页面 v1.2 批量数据生成表格

    html 报告页面 v1.2 批量数据生成表格 上代码: <!DOCTYPE html> <html lang="en"> <head> < ...

  8. Linux内核中_IO,_IOR,_IOW,_IOWR宏的用法与解析

    ref from : http://blog.csdn.net/zhuxiaoping54532/article/details/49680537 main 在驱动程序里, ioctl() 函数上传送 ...

  9. Hibernate连接池断开自动重连

    异常: javax.servlet.ServletException: org.springframework.transaction.CannotCreateTransactionException ...

  10. windows和linux下 Python2,Python3 的环境及安装

    目录 windows和linux下 Python2,Python3 的环境及安装 window下安装 一. 手动安装 二. pip安装 linux下 安装 更新Python 笔者有话 windows和 ...