首页分享关于＜meta name=“viewport“ content=“width=device

关于＜meta name=“viewport“ content=“width=device

来源：花匠小妙招时间：2024-12-21 06:18

网页源码中有时会遇到这样的一段代码：

<metaname="viewport"content=“width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no” />

width-viewport - 的宽度 height-viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

具体的viewport解释看这里=======>
原文：http://www.php100.com/html/webkaifa/HTML5/2012/0831/10979.html

viewport 语法介绍

width
控制 viewport 的大小，可以指定的一个值或者特殊值，如 device-width 为设备的宽度（单位缩放为100%时的CSS的像素）。
height
和width相对应，指定高度。
target-densitydpi
一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。Android支持三种屏幕像素密度：低像素密度，中像素密度，高像素密度。一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser 和 WebView 默认屏幕为中像素密度。

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

device-dpi - 使用设备原本的 dpi 作为目标 dp。不会发生默认缩放。
height-dpi - 使用 hdpi 作为目标 dpi 。中等像素密度和低等像素密度设备相应缩小。
medium-dpi - 使用mdpi作为目标 dpi 。高像素密度设备相应放大，像素密度设别响应缩小。这是默认的target-density。
low-dpi - 使用mdpi作为目标 dpi 。中等像素密度和高像素密度设备相应放大。
- 指定一个具体的 dpi 值作为 target dpi 。这个值的范围必须在70-400之间。

<! html document> <meta name="viewport" content="target-densitydpi=device-dpi" /> <meta name="viewport" content="target-densitydpi=hight-dpi" /> <meta name="viewport" content="target-densitydpi=medium-dpi" /> <meta name="viewport" content="target-densitydpi=low-dpi"/> <meta name="viewport" content="target-densitydpi=200" /> 123456

为了防止Android Browser 和 WebView 根据不同屏幕的像素问题密度对你的页面进行缩放，你可以将 Viewport的target-densitydpi 设置为 device-dpi。当你这么做了，页面将不会缩放。相反，页面会格局当前屏幕的像素密度进行展示。在这种情况下，你还需要将viewport 的 width定义为与设备的width匹配，这样你的页面就可以和屏幕相适应。

initial-scale
初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置缩放为“1.0”，那么，web页面在展现的时候就会以target density 分辨率的 1:1 来展现。如果你设置为“2.0”,那么这个页面就会放大为2倍。

maximum-scale
最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，如果你将这个值设置为“2.0”，那么这个页面与target size 相比，最多能放大2倍。

user-scalable
用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes 则是允许用户对其进行改变，反之为no.默认值是yes。如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。

所有的缩放值都必须在0.01~10的范围之内。
例：（设置屏幕宽度为设备宽度，禁止用户手动调整缩放）

（设置屏幕密度为高频，中频，低频自动缩放，禁止用户手动调整缩放）

以上内容转自http://blog.csdn.net/joyhen/article/details/43266927

以下内容转自点击打开链接

论meta name="viewport content=width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1的作用"

一、先明白几个概念

phys.width:
device-width:
一般我们所指的宽度width 即为 phys.width,而且device-width又称为css-width。
其中我们可以获取phys.width即width通过document.documentElement.clientWidth;而获取css-width通过window.screen.width获取。如果iphone6的phys.width为750px,而css-wdith为375px。

二、明白一个浏览器默认行为。

试想，浏览器如果把电脑端的980px的网页展现在宽度为750px的iphone6手机屏上，势必会放不下，手机端横向会出现滚动条，怎么阻止这种情况，很简单，浏览器默认一个虚拟窗口，不同浏览器有不同的虚拟窗口宽度的默认值如：safari iphone:980px;
opera:850px;Andriod webkit:800px; IE:974px;然后会把这个980px虚拟窗口装进宽度为750px的iphone6中，当然这样的化必须缩放，这就是为什么子啊是偶系中展现电脑端页面没有出现横向滚动条，而且自己明显变小的原因。

三、讲解meta name=viewport content=width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1

meta标签中，width有两个含义，第一、width为phys.width,第二，width也为虚拟窗口的width。这样就会有两个结果：
第一、此时的IPhone6的phys.width也变成了css-width即为375px,我们可以通过document.documentElement.clientWidth获取得到此时phys.width确实为375px。

第二、如你设计的是375px的手机端页面，此时的虚拟窗口的宽度也为375px，再装进phys.width为375px的手机，当然如设计稿一样的效果，不会缩放，也不会出现横向滚动条。

四、对响应式布局，媒体查询的影响

@media only screen and (min-width: 350px) and (max-width: 480px){…}

如没有meta标签，此时的width当然即为phys.width，iPhone6就不会执行上边的括号里边的代码，但是有了meta标签以后呢，width变成了css-width，即为375px,，所以是会执行代码的。

五、论meta标签的影响

从上边可以看出，有了meta标签以后，原本的iPhone6，即像素比为2的手机，可以按照css-width相同的像素比为1的手机一样正常显示，像素比更高的手机也能正常显示。当然现在andriod的2K屏在meta标签的帮助下也能正常显示。即对于开发者来说，已经可以不管手机的像素比，只需按照css像素编写代码即可。