手机有不同的分辨率，不同的屏幕大小，如何使我们开发的应用或页面大小能适合各种高端手机的使用？学习html5 viewport能帮助我们实现这一点，且在Android中还支持。
语法：
<!--一般，页面准许用户缩放时，使用以下设置-->
<meta name="viewport" content="width=device-width, maximum-scale=10,minimum-scale=1,initial-scale=1,user-scalable=yes"/>
<!--一般，页面不准许用户缩放时，使用以下设置-->
<meta name="viewport" content="width=device-width,maximum-scale=10,minimum-scale=1,initial-scale=1,user-scalable=no"/>
详解：
width=device-width：设置宽度为屏幕宽度
maximum-scale=10.0：设置最大缩放比例，值0.25-10.0
minimum-scale=1.0：设置最小缩放比例，不能小于初始化的比例，值0.25-10.0
width=device-width / height=device-height：
设置宽度为屏幕宽度 / 设置高度为屏幕的高度。
可以设置一个固定的值，尽可能不要这样使用。
设置为设备的宽度：device-width。
height是设置高度使用的，我们很少使用。
initial-scale=1.0：设置初始化的缩放比例
user-scalable=no / user-scalable=0：是否允许用户缩放页面，值为 yes(默认)或1、no/0，如果设置为no，那么maximum-scale和minimum-scale将被忽略，因为不允许缩放。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--响应式布局：是根据不同的窗口的宽度使用不同的CSS样式。-->
<!--viewport:适配屏幕像素的技术，在css中，1px单位在像素密度越大的设备上，
表现的实际尺寸越小，为了保证尺寸不失真，一般屏幕密度可选性较多的移动设备中使用
viewport技术，让同一套样式在不同密度设置中的表现一致。
-->
<!--元信息标签：实现viewport技术-->
<!--width:设置的是展示页面的视口（viewport）的宽度，一般不需要指定数值，让浏览器
根据设备的实际宽度设置为自己的宽度即可。
-->
<!-- mini==initial<=max-->
<!--maximum-scale：设置页面的放大倍数，取值范围：0.25--10.0；一般取值为：5、8、10-->
<!--initial-scale：初始化页面放大倍数，取值范围：0.25--10.0；一般取值为：1-->
<!--minimum-scale：设置页面的缩小倍数，取值范围：0.25--10.0；一般取值和initial-scale保持一致-->
<!--以上三个属性互相配合使用， mini==initial<=max-->
<!--user-scalable:设置用户是否可以缩放页面：默认：yes(1)-->
<!--一般，页面准许用户缩放时，使用以下设置-->
<meta name="viewport" content="width=device-width, maximum-scale=10,minimum-scale=1,initial-scale=1,user-scalable=yes"/>
<!--一般，页面不准许用户缩放时，使用以下设置-->
<meta name="viewport" content="width=device-width,maximum-scale=10,minimum-scale=1,initial-scale=1,user-scalable=no"/>
</head>
<body>
<div>
马艺博马艺博马艺博马艺博马艺博马艺博马艺博马艺博马艺博马艺博
马艺博马艺博马艺博马艺博马艺博马艺博马艺博马艺博马艺博马艺博
马艺博马艺博马艺博马艺博马艺博马艺博马艺博马艺博马艺博马艺博
马艺博马艺博马艺博马艺博马艺博马艺博马艺博马艺博马艺博马艺博
马艺博马艺博马艺博马艺博马艺博马艺博马艺博马艺博马艺博马艺博
马艺博马艺博马艺博马艺博马艺博马艺博马艺博马艺博马艺博马艺博
</div>
</body>
</html>
网友评论