当前位置:首页 > 日记 > 正文

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。设置屏幕密度为高频,中频,低频自动缩放,用户无需手动调节变焦。
复制代码代码如下所示:

相关文章

CSS3属性框阴影使用指南

CSS3属性框阴影使用指南

使用指南,属性,电脑软件,本文主要介绍了CSS3属性框阴影的使用指南,需要的朋友可以参考下 今天太忙了,看不到新事物。记录常用的CSS3属性:盒子的影子,代表的影子。如果设置边框半径圆角,阴影也是圆角。 box-shadow目前是由IE9及以上和其他现代浏…

PS图象处理软件对流行的秋季绿色红

PS图象处理软件对流行的秋季绿色红

红色,流行,图象,秋季,处理软件,天空有点灰,地面有点黑。当它的色调,它可以把地面的主要颜色为红棕色,并把天空的颜色变成绿色,然后把温暖的颜色稍微。 天空有点灰,地面有点黑。当它的色调,它可以把地面的主要颜色红棕色,把天空颜色为绿色,然后把温…

对window.showmodaldialog用法的详

对window.showmodaldialog用法的详

详细说明,电脑软件,window,showmodaldialog,Javascript,使用弹出窗口在项目的今天,想用Javascript的两种方法,一个window.showmodaldialog window.open();()方法,后者是一个弹出窗口,存在父子关系,只有子窗口关闭,激活,父窗口和口才可以传递参数和返回值。它…

PS图象处理软件的画笔使用详细的解

PS图象处理软件的画笔使用详细的解

解释,图象,处理软件,详细,电脑软件,本文主要介绍了面板的设置,在PS图象处理软件的画笔工具的使用方法和技巧,并详细阐述了。 除了直径和硬度的设定,PS图象处理软件提供了一个非常详细的设置画笔,使画笔五颜六色,不再只是简单的效果我们之前看到…

AI创造丰富的俏皮杂志封面效果

AI创造丰富的俏皮杂志封面效果

创造,俏皮,封面,效果,杂志,本教程是介绍朋友创建丰富的少儿杂志封面效果,使用AI教程比较实用,使用方法,各种绘画工具推荐在这里,喜欢的朋友可以跟着教程一起学习。 本文介绍了使用AI教程的各种基本绘图工具,为了使读者能够用这些方法掌握这些工…

用PS合成创意梦幻海洋与蓝天景观

用PS合成创意梦幻海洋与蓝天景观

蓝天,创意,景观,梦幻,电脑软件,本教程介绍给朋友,用PS创作创意唯美,梦幻大海和蓝天景观。教程制作的图片非常漂亮,方法也不难。建议像你这样的朋友一起学习教程。 本教程介绍用PS合成创意和梦幻般的大海和蓝天园林的方法。教程的合成方法,使用…

PS图象处理软件把人物照片变成有趣

PS图象处理软件把人物照片变成有趣

照片,图象,处理软件,喜剧,有趣,本教程介绍朋友的人使用PS图象处理软件的照片变成一个有趣的大喜剧效果的过程,引导产生的效果真的很棒,介绍的很详细,很好的教程,推荐这里,一起学习吧 本教程介绍朋友使用PS图象处理软件的照片到大的喜剧效果很有…

使用CSS来控制字符串的输出长度是

使用CSS来控制字符串的输出长度是

字符串,控制,输出,不定期,长度,使用宽度,白色空间:nowrap;溢出:隐藏;文本溢出:省略和其它性能,其中宽度指定长度 CSS可以写这个: 复制代码代码如下所示: 测试字符测试文本测试文本测试文本测试文本…

FCKeditor不在Chrome的显示问题

FCKeditor不在Chrome的显示问题

显示,电脑软件,FCKeditor,Chrome,有些人说可以在互联网上做以下修改,但这取决于您使用的系统。程序员的水平决定了兼容性,但你可以试试。 this.enablesafari = true; / /这是一个临时的性质,而Safari的支持正在开发中。 变假为真后,显示正常。 …

站长应注意提高网站可用性的9种代

站长应注意提高网站可用性的9种代

代码优化,网站,可用性,应注意,站长,本文主要介绍了网站管理员应该注意的9种网页可用性技巧。每个网站都可以使用。它属于代码级优化技术,需要的朋友可以参考一下。 1。添加替代文本到LO 这有两个优点:屏幕阅读器可以识别LO图片的含义。当图…

利用中断内层的外环分析用javacrip

利用中断内层的外环分析用javacrip

外环,中断,电脑软件,javacript,本文分析了使用用javacript采用打破内层跳出外层循环。分享给你供你参考。具体分析如下: 与PHP不同,Javascript循环中断,需要添加额外的标签。例如购买100只鸡(搜索张秋构建,100只鸡和100只鸡): 复制代码代码如下所示: …

CSS3变换的偏移属性值图详细的说明

CSS3变换的偏移属性值图详细的说明

变换,属性值,详细,电脑软件,斜(…)的括号放在坐标轴的旋转角上。然后我们知道y轴顺时针方向旋转,x轴顺时针方向旋转。 我只是接触转换歪斜属性值迷茫,不知道什么样的变化是怎样的。访问互联网,每个网站只说使用这个做扭曲,什么是变化是不说。但…