HTML5在移动端屏幕适配的一个例子
HTML5是一个最热门的技术,移动终端也因为HTML5技术的加入变得更灵活,每个人都爱写一次,跑,more但在今年扎克伯格承认在HTML5的错误我们也应该意识到HTML5作为一种新的技术,有很多地方不完善,作为HTML5的效率,这足以让许多程序员无法Tucao,消费者将无法忍受。但不可否认的是,HTML5带给我们的Web技术好。这是未来发展的趋势,而不是终点。我们能做的是更加努力地改进它,编写更高效的代码。
好吧,那么多废话,现在开始进入主题,Android程序员Android适应问题是最头疼的问题,因此我们也各显神通啊,八仙过海,但在HTML5可以更好地解决这个问题。手机浏览器的网页在一个虚拟的窗口(视图),通常的虚拟窗口(视口)比宽屏幕,所以你不必挤每一页的一个小窗口(这不会损害手机浏览器页面优化布局,用户可以)通过平移和缩放视图页面的不同部分。常见的视口布局:
具体含义是:
宽度:控制视口的大小,可以是一个指定值,如果600,或一个特殊值,如设备宽度设备(宽度为100%像素的缩放CSS),默认虚拟窗口是980像素宽(大多数网站标准宽度),然后按一定比例(3:1或2:1缩放)。
高度:与宽度相对应,指定高度。
目标densitydpi:屏幕像素密度的屏幕分辨率确定,通常定义为每英寸点数的数量(DPI)。安卓支持三屏幕像素密度:低像素密度、介质密度和像素,像素密度高,低像素密度的屏幕每英寸像素少,和高像素密度屏幕上每英寸像素越多,Android浏览器WebView默认屏幕中的像素密度。
以下是对目标densitydpi属性值的范围
使用设备原始的DPI作为目标DP,没有默认缩放。
高DPI ndash;利用华电国际为目标的DPI中像素密度和低像素密度的设备也相应减少。
中等DPI ndash;使用MDPI作为目标DPI,高像素密度的设备放大相应,和像素密度的设备也相应减少。这是默认的目标密度。
低DPI使用MDPI作为目标DPI。中的像素密度和高像素密度的设备被放大,因此。
指定特定DPI值作为目标DPI值的范围。必须在70ndash;400。
为了防止Android浏览器WebView缩放页面根据不同的屏幕像素密度,你可以设置视口的目标densitydpi到device-dpi.when你做到这一点,该页面将不会被放大。相反,页面将显示在当前屏幕的像素密度的基础。在这的情况下,你还需要定义视口的宽度与设备的宽度的比赛让你的页面可以适应屏幕。
初始比例:初始缩放比例也是页面第一页加载时的缩放比例。
最大比例:允许用户从0缩放到10的最大比例。
最小规模:允许用户将最小规模从0扩展到10。
用户可伸缩:如果用户可以手动缩放,值可以是:1。是的,TRUE允许用户缩放;不,false不允许用户缩放,如果您设置为NO,那么最小规模和最大规模将被忽略,因为它是不可能变焦。
所有的变焦值必须在0.01ndash范围;10。
在将这些属性设置为HTML5的元属性之后,您可以适应电话屏幕,例如:
复制代码代码如下所示:
{ mw_shl_code = XHTML,true} 内容
高度= { } | pixel_value装置高度,
宽度= { pixel_value设备宽度| },
初始规模= float_value,
最小规模= float_value,
最大规模= float_value,
用户可扩展= {是} |,
目标densitydpi = { dpi_value装置DPI高DPI中DPI | | | |低DPI }
/ / mw_shl_code } {
这里有两个实际使用的例子:
(设置屏幕宽度为设备宽度,用户不允许手动调整缩放)
复制代码代码如下所示:
(设置屏幕密度为高频、中频、低频自动缩放、无需手动调整和缩放)
复制代码代码如下所示: