关于meta标签的name=viewport概述
关于meta标签的name=viewport概述
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
⼀、什么是Viewport
求婚表白的话⼿机浏览器是把页⾯放在⼀个虚拟的“窗⼝”（viewport）中，通常这个虚拟的“窗⼝”（viewport）⽐屏幕宽，这样就不⽤把每个⽹页挤到很⼩的窗⼝中，也不会破坏没有针对⼿机浏览器优化的⽹页的布局，⽤户可以通过平移和缩放来看⽹页的不同部分。移动版的 Safari 浏览器最新引进了viewport 这个 meta tag，让⽹页开发者来控制 viewport 的⼤⼩和缩放，其他⼿机浏览器也基本⽀持。
通俗的讲，移动设备上的viewport就是设备的屏幕上能⽤来显⽰我们的⽹页的那⼀块区域，在具体⼀点，就是浏览器上(也可能是⼀个app中的webview)⽤来显⽰⽹页的那部分区域，但viewport⼜不局限于浏览器可视区域的⼤⼩，它可能⽐浏览器的可视区域要⼤，也可能⽐浏览器的可视区域要⼩。在默认情况下，⼀般来讲，移动设备上的viewport都是要⼤于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌⾯电脑来说都⽐较⼩，所以为了能在移动设备上正常显⽰那些传统的为桌⾯浏览器设计的⽹站，移动设备上的浏览器都会把⾃⼰默认的viewport设为980px或1024px（也可能是其它值，这个是由设备⾃⼰决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是⽐这
个默认的viewport的宽度要⼩的。下图列出了⼀些设备上浏览器的默认viewport的宽度。
李煜的诗
了解更多：
⼆、Viewport基础
⼀个常⽤的针对移动⽹页优化过的页⾯的 viewport meta 标签⼤致如下：
芙蓉出水妒花钿1、width : 控制viewport的⼤⼩，可以指定⼀个值，如600，或者特殊的值，如device-width为设备的宽度（单位是缩放为100%的CSS的像素）
中秋的短信2、height : 和width相对应，指定⾼度
3、initial-scale : 初始缩放⽐例，页⾯第⼀次加载时的缩放⽐例
4、maximum-scale : 允许⽤户缩放到的最⼤⽐例，范围从0到10.0
5、minimum-scale : 允许⽤户缩放到的最⼩⽐例，范围从0到10.0
6、user-scalable : ⽤户是否可以⼿动缩放，值可以是：①yes、 true允许⽤户缩放；②no、false不允许⽤户缩放首页被篡改
三、关于viewport的⼀些问题
上火吃什么viewport并⾮只是ios上的独有属性，在android、winphone上同样也有viewport。它们要解决的问题是相同的，即⽆视设备的真实分辨率，直接通过dpi，在物理尺⼨和浏览器之间重设分辨率，这个分辨率和设备的分辨率⽆关。
⽐如，你拿个3.5⼨-320 * 480的iphone3 gs、3.5⼨-640 * 960的iphone4或者9.7⼨-1024*768的ipad2，虽然设备的分辨率不同，物理尺⼨也不同，但你可以通过设置viewport让它们在浏览器⾥有相同的分辨率。
⽐如说，你的⽹站是800px宽，你可以通过设置viewport的width=800，来让你的⽹站在这三个不同的设备上都刚好满屏显⽰你的⽹站。
⽹上⼀搜关于viewport的知识，基本上全都是如下信息：
这段代码的意思是，让viewport的宽度等于物理设备上的真实分辨率，不允许⽤户缩放。⼀都主流的web app都是这么设置的，它的作⽤其实是故意舍弃viewport，不缩放页⾯，这样dpi肯定和设备上的
真实分辨率是⼀样的，不做任何缩放，⽹页会因此显得更⾼细腻。
以上
总结：
⾸先如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，1024px等这些，总之是⼤于屏幕宽度的。这⾥的宽度所⽤的单位px都是指css中的px，它跟代表实际屏幕物理像素的px不是⼀回事。
第⼆、每个移动设备浏览器中都有⼀个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于100%的所代表的那个宽度。我们可以⽤meta标签把viewport的宽度设为那个理想的宽度，如果不知道这个设备的理想宽度是多少，那么⽤device-width这个特殊值就⾏了，同时initial-scale=1也有把viewport的宽度设为理想宽度的作⽤。所以，我们可以使⽤
<meta name="viewport" content="width=device-width, initial-scale=1">
来得到⼀个理想的viewport（也就是前⾯说的ideal viewport）。
为什么需要有理想的viewport呢？⽐如⼀个分辨率为320x480的⼿机理想viewport的宽度是320px，⽽另⼀个屏幕尺⼨相同但分辨率为
640x960的⼿机的理想viewport宽度也是为320px，那为什么分辨率⼤的这个⼿机的理想宽度要跟分辨率⼩的那个⼿机的理想宽度⼀样呢？这是因为，只有这样才能保证同样的⽹站在不同分辨率的设备上看起来都是⼀样或差不多的。实际上，现在市⾯上虽然有那么多不同种类不同品牌不同分辨率的⼿机，但它们的理想viewport宽度归纳起来⽆⾮也就 320、360、384、400等⼏种，都是⾮常接近的，理想宽度的相近也就意味着我们针对某个设备的理想viewport⽽做出的⽹站，在其他设备上的表现也不会相差⾮常多甚⾄是表现⼀样的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。