html5在移动端的屏幕适应问题示例探讨

《html5在移动端的屏幕适应问题示例探讨》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、html5在移动端的屏幕适应问题示例探讨Html5曾经是最最炙手可热的技术，移动端也因为html5技术的加入变得更加变通一些，人人都喜欢“Writeonce，runmore”，但在今年扎克伯格承认在html5上的失策以来，我们也应该清醒的认识到html5作为一种新兴技术，还有许多不完善的地方，比如html5的效率问题，这足以让众多程序员们无力吐槽，消费者们也会无法忍受。但不可否认的是html5给我们带来给好的web技术，它是未来发展的趋势，并且不是终点，我们能够做的就是更加努力的完善它，写出更好，更有效率的代码。好了，说了这么多废

2、话，现在开始进入主题，android的适配问题是最让android程序员头疼的问题，大家为此也是八仙过海，各显神通啊，但在html5这里我们可以更好的解决这项问题。手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中，通常这个虚拟的“窗口”(viewport)比屏幕宽，这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局)，用户可以通过平移和缩放来看网页的不同部分。常用的viewport布局为：1t;metaname="viewport’’content="width=device-widt

3、h,user-scalable=no’’/gt;具体的含义是：width：控制viewport的大小，可以指定的一个值，如果600，或者特殊的值，如device-width为设备的宽度（单位为缩放为100%时的CSS的像素），默认的虚拟窗口为980像素宽（目前大部分网站的标准宽度），然后按一定的比例（3:1或2:1）进行缩放。height:和width相对应，指定高度。target-densitydpi：一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。Android支持三种屏幕像素密度：低像素密度，中像素

4、密度，高像素密度。一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点更多。AndroidBrowser和WebView默认屏幕为中像素密度。下面是target-densitydpi属性的取值范围device-dpi-使用设备原本的dpi作为目标dp。不会发生默认缩放。high-dpi-使用hdpi作为目标dpi。中等像素密度和低像素密度设备相应缩小。medium-dpi-使用mdpi作为目标dpi。高像素密度设备相应放大，像素密度设备相应缩小。这是默认的targetdensity.low-dpi_使用

5、mdpi作为目标dpi。中等像素密度和高像素密度设备相应放大。It;valuegt;-指定一个具体的dpi值作为targetdpi.这个值的范围必须在70-400之间。It;metaname="viewport^content="target-densitydpi=device-dpi〃/gt;It;metaname=z/viewport^content=zztarget-densitydpi=high-dpi〃/gt;It;metaname=〃viewport〃content=〃target-densitydpi=medium-

6、dpi〃/gt;It;metaname="viewportz/content=z/target-densitydpi=low-dpi〃/gt;1t;metana.me=z/viewport/zcontent=〃target-densitydpi=200z7gt:为了防止AndroidBrowser和WebView根据不同屏幕的像素密度对你的页面进行缩放，你可以将Viewport的target-densitydpi设置为device-dpi。当你这么做了，页面将不会缩放。相反，页面会根据当前屏幕的像素密度进行展示。在这种情形下，你还

7、需要将viewport的width定义为与设备的width匹配，这样你的页面就可以和屏幕相适应。initial-scale：初始缩放比例，也即是当页面第一次load的时候缩放比例。maximum-scale：允许用户缩放到的最大比例，范围从0到10.0。minimum-scale:允许用户缩放到的最小比例，范围从0到10.0。user-scalable：用户是否可以手动缩放，值可以是：①yes、true允许用户缩放；②no、false不允许用户缩放，如果你将其设置为no，那么minimum-scale和maximum-scale都

8、将被忽略，因为根本不可能缩放。所有的缩放值都必须在0.01-10的范围之内。将这些属性设置之后放入html5的meta属性中，即可对手机屏幕进行适应，例：代码如下：[mw_shl_code=xhtml，true]It;metaname=〃viewp