记录viewport的用法指南

在移动页面开发中,最明显的区别就是屏幕的尺寸,好在浏览器开放了viewport属性可以来控制视窗的显示。

记录viewport的用法指南

<meta name="viewport" content="name=value,name=value">
Name Value Description
width 正整数或关键字: device-width 定义视口的宽度,单位为像素
height 正整数或关键字: device-height 定义视口的高度,单位为像素(极少使用)
initial-scale 0.0-10.0之间的数值 定义初始缩放值
minimum-scale 0.0-10.0之间的数值 定义缩小最小比例,它必须小于或等于maximum-scale
maximum-scale 0.0-10.0之间的数值 定义放大最大比例,它必须大于或等于minimum-scale
user-scalable 布尔值(yes or no) 定义是否允许用户手动缩放页面,默认值yes
minimal-ui 定义在网页加载时隐藏地址栏与导航栏(ios7.1新增)
加载页面时,自动隐藏顶部地址栏及底部导航栏;
当点击顶部时显示,点击页面任何部分时隐藏。
当前支持:ios7.1, Safari。
<meta name="viewport" content="minimal-ui">
不太推荐使用的target-densitydpi,CSS3的@media query有一个resolution属性,与target-densitydpi的作用差不多。
一个屏幕像素密度是由屏幕分辨率决定的,通常定义为每英寸点的数量(dpi)。Android支持三种屏幕像素密度:低像素密度,中像素密度,高像素密度。一个低像素密度的屏幕每英寸上的像素点更少,而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。

下面是 target-densitydpi 属性的取值范围:

device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
high-dpi – 使用hdpi 作为目标 dpi。中等像素密度和低像素密度设备相应缩小。
medium-dpi – 使用mdpi作为目标 dpi。高像素密度设备相应放大,像素密度设备相应缩小。 这是默认的target density
low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。
当然如果更精确的想控制页面在不同设备的布局及显示,可以用@media来控制,比如@media (max-width: 1080px) {.....}里面可以写在小于1080px设备上的样式。本页面就用了这个,查看css代码即可看到。在移动设备上,左侧栏是不显示的。

相关阅读