您的位置：首页 > Web前端 > HTML5

HTML5开发之viewport的使用

2016-09-14 09:54 302 查看

HTML5开发之viewport的使用

在使用HTML5进行开发的过程中，我们会遇到这样的问题：不同的手机可能会有不同的分辨率和不同的屏幕大小，我们如何使开发出来的应用或页面能适用于不同的手机呢？（即是网页的适配问题）

通过viewport的使用，可以帮助我们解决这个问题。viewport是一个虚拟的窗口（通常比真实设备的屏幕宽），浏览器可以把页面放入其中来显示，我们可以通过设置viewport的大小，动态的设置网页中控件元素的大小，从而使得在不同的设备上看到同样效果的页面（只是比例可能会有所不同）。

viewport语法如下：

    <head>
       <meta name="viewport"
content="height = [pixel_value |device-height] ,

           width = [pixel_value |device-width ] ,
           initial-scale =float_value ,
           minimum-scale =float_value ,
           maximum-scale =float_value ,
           user-scalable = [yes | no],
           target-densitydpi =[dpi_value | device-dpi | high-dpi |
                                                          medium-dpi |low-dpi]"/>
    </head>

viewport属性值介绍：
height：控制viewport的大小，可以指定一个值或者一个特殊的值，如device-hieght 便代表了设备的高度（单位为缩放100%时的CSS的像素）。
width:和height一起控制viewport的大小，同样可以指定一个值或者一个特殊的值，如device-width 便代表了设备的高度（单位为缩放100%时的CSS的像素）。
initial-scale:设置页面的初始缩放程度(加载时的比例)，我们需要设置一个浮点数值，这个浮点数是页面大小的一个乘积，例如：我们设置为“1.0”的话，页面就会以目标显示屏分辨率的1:1来展示；如果我们设置为。
注释：如果要设置当前viewport的宽度，我们可以使用width=device-width 或 initial-scale=1.0 ，两者的效果相同（在两者同时出现时，viewport会选择较大的宽度）。
下面的代码效果是相同的：
<meta name="viewport" content="width=device-width">
和
<meta name="viewport" content="initial-scale=1">
minimum-scale: 允许用户缩放到的最小比例，我们需要设置一个浮点数值。
maximum-scale: 允许用户缩放到的最小比例，我们需要设置一个浮点数值。
user-scale: 用户是否可以手动缩放。值为"no"或"yes", no 代表不允许，yes代表允许。如果将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略。
target-densitydpi（只有Android设备支持，尽量不用）: 表明设备的密度等级，用于决定css中的1px代表多少物理像素，即dpi。target-desitydpi的取值范围如下：
l device-dpi：使用设备原本的dpi 作为目标 dpi。通常我们选择该值，来让我们的网页根据不同屏幕的像素密度对页面进行缩放。
l high-dpi：使用hdpi作为目标dpi。中等像素密度和低像素密度设备相应缩小。
l medium-dpi：使用mdpi作为目标dpi。高像素密度设备相应放大，低像素密度设备相应缩小。这是默认的targetdensity.
l low-dpi：使用ldpi作为目标dpi。中等像素密度和高像素密度设备相应放大。
l <value>：指定一个具体的dpi值作为targetdpi. 这个值的范围必须在70–400之间。

注释：viewport属性值的属性可以单独或混合使用，多个属性同时使用时，要用逗号隔开。

通过上面的内容，我们已经讲解了如何静态的设置viewport，下面我们来讲解一下动态的改变meta viewport标签：
动态改变metaviewport标签
1. 通过使用document.write来动态输出metaviewport标签，代码如下：
document.write('<metaname="viewport"content="width=device-width,initial-scale=1">');
2. 通过setAttribute方法来改变，代码如下
<metaid="Viewport1" name="viewport">
<script>
var viewport1 =document.getElementById('Viewport1');
viewport1.setAttribute('content','width=device-width');
</script>

到这里为止，我们就对meta viewport标签进行了一个简单的讲解，希望可以供大家参考！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航