[WebView学习之二]:使用Web Apps 支持不同分辨率屏

       上一篇我们学习了(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.devicePixelRationDOM属性来查询当前设备的密度。该属性的值代表当前设置的缩放比例因子。例如:如果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>





评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值