HTML5视口使用方法实例详解

HTML5视口使用方法实例详解
随着高端手机的普及(Andriod、iPhone、iPod、WinPhone、等)、移动互联网应用的发展越来越受到重视。使用HTML5开发移动应用程序是最好的选择,然而,每个手机都有不同的分辨率和屏幕大小。我们如何使我们开发的应用程序或页面的尺寸适合各种高端手机学习HTML5的视口
视图的语法:
复制代码代码如下所示:

内容=;
高度= { } | pixel_value装置高度,
宽度= { pixel_value设备宽度| },
初始规模= float_value,
最小规模= float_value,
最大规模= float_value,
用户可扩展= {是} |,
目标densitydpi = { dpi_value装置DPI高DPI中DPI | | | |低DPI }

>
参数解释:

宽度
mdash;-控制视口的大小,可以指定一个值或特殊值,例如,设备宽度是该装置的宽度(CSS像素时的规模为100%)。

高度
mdash;—对应于指定的宽度、高度。

目标densitydpi
mdash;-屏幕像素密度是由屏幕分辨率决定的,通常定义为每英寸点数的数量(DPI)。安卓支持三屏幕像素密度:低像素密度、介质密度和像素,像素密度高,低像素密度的屏幕每英寸像素少,和高像素密度的屏幕每英寸的像素越多,Android浏览器WebView默认屏幕中的像素密度。

以下是对目标densitydpi属性值的范围
设备DPI:使用设备的原始DPI作为目标DP。没有默认缩放。
高分辨率:以华电国际为目标的DPI中像素密度和低像素密度的设备也相应减少。
介质:使用DPI MDPI作为目标DPI,高像素密度的设备放大相应,和像素密度的设备也相应减少。这是默认的目标密度。
低DPI:使用MDPI作为目标DPI。中的像素密度和高像素密度的设备被放大,因此。
指定特定DPI值作为目标DPI值的范围。必须在70ndash;400。
复制代码代码如下所示:
为了防止Android浏览器WebView缩放页面根据不同的屏幕像素密度,你可以设置视口的目标densitydpi到device-dpi.when你做到这一点,该页面将不会被放大。相反,页面将显示在当前屏幕的像素密度的基础。在这的情况下,你还需要定义视口的宽度与设备的宽度的比赛让你的页面可以适应屏幕。

初始规模
mdash;-初始缩放,页面的初始规模。这是一个浮点值,增加页面的大小。例如,如果你设置为初始缩放;1.0然后,该网页将被显示在目标密度1:1的分辨率表现的时间。如果你将它设置为2.0那么这个页面将被放大到2倍。

最大规模
mdash;-最大比例,允许范围内的最大程度,这也是一个浮点值,用于指示页面大小的乘数比屏幕尺寸。例如,如果您将此值设置为2.0那么这个页面可以2倍的放大比目标大小。

用户可扩展
mdash;-用户调整缩放,用户是否可以更改页的规模。如果设置为是,用户可以改变它,相反,它是否定的默认值是肯定的。如果你将它设置为无,然后最小规模和最大规模将被忽略,因为它是不可能在全变焦。

所有的变焦值必须在0.01ndash范围;10。

示例:1。设置屏幕宽度是设备宽度,用户不允许手动调整缩放。
复制代码代码如下所示:
2。设置屏幕密度为高频,中频,低频自动缩放,用户无需手动调节变焦。
复制代码代码如下所示:

tag:视口使用方法详解实例电脑软件

相关内容