关于＜meta name=“viewport“ content=“width=device-width,initial-scake=1.0, maximum-scale=1.0,user-s..“＞

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

<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 语法介绍

<!html document>
<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 | height-dpi | medium-dpi | low-dpi]"/>

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" />

为了防止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的范围之内。
例：（设置屏幕宽度为设备宽度，禁止用户手动调整缩放）

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

<meta name="viewport" content="width=device-width,target-density=high-dpi,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

以上内容转自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像素编写代码即可。

关于＜meta name=“viewport“ content=“width=device-width,initial-scake=1.0, maximum-scale=1.0,user-s..“＞相关推荐

学计算机是不是必须要买电脑,上大学了，你必须买一部电脑吗？
有一位今年的大一新生在网上问:上大学了,必须买电脑吗? 对于这个问题,大家的看法没有大的分歧,我们总结整理一下,大致观点如下: 一,根据学生学习的需要情况. 在大学里,有些专业学习时必须用到电脑,类似 ...
菜鸟学编程，用x86二手本学习嵌入式编程（硬件编程）
最近一直忙着上课,一直忙着写论文,一直忙着准备考试,但是脑子没有停止思考. 下学是结合个人的学习经历,给希望学习软件的菜鸟一点点帮助. 1:菜鸟也想学编程大部分同学从大学开始接触软件编程,但其实有一 ...
小孩多大适合学编程机器人
小孩多大适合学编程机器人?小孩的学习一直以来都是家长们非常关心和重视的一件事情.很多的家长在培养孩子的学习的时候,在选择学习课程的时候,可以说是非常的用心的.就拿现在很多的家长想要孩子去学习机器人编程 ...
关于《学编程，还有必要上大学吗？》
这两天登录CSDN,下面的广告弹出链接写着<学编程,还有必要上大学吗?>原来是篇针对<收回你的偏见,软件培训机构更能出人才>和<90后高中生学编程月薪过万,刺痛了谁?&g ...
电路板必须用c语言编程吗,上大学才知道绿油油的板子叫PCB，如何成为一名电子工程师...
原标题:上大学才知道绿油油的板子叫PCB,如何成为一名电子工程师本文为十周年征文来稿,活动还在就行中欢迎烧友们拉到文章底部了解参加对活动有疑问欢迎联系小助手(微信:XM1007721171) 我是 ...
@大学生，送给步入大学生活的你，高速学编程。
大学生怎样学习编程,学哪个编程语言好? 上大学后学哪门编程语言好?大学生学哪个编程语言好就业?学哪个编程语言工资高?新手如何自学编程?哪个编程语言开发的软件多?大公司都招聘哪些编程语言人才? 相信很多 ...
大学java怎么算学得好_为什么现在大学里很多计算机系的大学生，学编程的时候总学不好...
小编发现如今在大学校园里,总是会出现一种现象,就是现在大学里很多计算机系的大学生,学编程的时候总学不好,这到底是为什么呢?因为看不懂?因为不认真?相信很多同学也会感到疑惑,那小编就一起来分析一下吧,同 ...
大学如何开始学编程？
大学如何开始学编程? 作为编程初学者每个人一开始都很迷茫不知如何学习,学习也没动力,其实大家都是一样的,但这并不意味着你会成为一个糟糕的程序猿(媛).学习编程关键是要找到一种合适的语言,坚持学习,学 ...
3.4 学编程不拘于语言，学语言不限于平台——《逆袭大学》连载
返回到[全文目录] 目录 3.4 学编程不拘于语言,学语言不限于平台编程语言软件和硬件--计算机要作为一个整体看待语言的江湖语言不是回事多平台上的精彩 3.4 学编程不拘于语言,学语言不限于 ...
学编程会拉低数学成绩，巴黎大学跟踪1500个小学生得出结论
"怎么培养数学逻辑思维?来点编程试试?" 大概这是很多人的既有认知,毕竟感觉程序员们的数学都挺好的. 巴特,反转来了. 来自巴黎大学的研究人员发现,小学生改用编程课学数学后,对成绩 ...

关于＜meta name=“viewport“ content=“width=device-width,initial-scake=1.0, maximum-scale=1.0,user-s..“＞

关于＜meta name=“viewport“ content=“width=device-width,initial-scake=1.0, maximum-scale=1.0,user-s..“＞相关推荐

最新文章

热门文章