移动web开发之视口viewport

时间 2019-11-16

标签移动 web 开发 viewport 栏目无线繁體版

原文原文链接

前面的话

　　在CSS标准文档中，视口viewport被称为初始包含块。这个初始包含块是全部CSS百分比宽度推算的根源，它给CSS布局限制了一个最大宽度。在桌面上，视口的宽度和浏览器窗口的宽度一致。而在移动端，视口分为布局视口(layout viewport)、视觉视口(visual viewport)和理想视口(ideal viewport)javascript

布局视口

　　移动端设备的问题是，若是使视口的宽度和浏览器窗口宽度同样会致使很丑陋的结果。移动端浏览器一般的宽度是240到640像素，且大多数设计给桌面的网站的宽度至少是800px。所以网站内容在手机上看起来会很是窄java

　　//下图是新浪网在手机端的显示状态，若是不进行缩放操做的话，文字几乎是没法看清的web

　　在手机上，视口与移动端浏览器屏幕宽度再也不相关联，而是彻底独立的。咱们称它为布局视口——CSS布局会根据它来计算，并被它约束chrome

　　为了容纳为桌面浏览器设计的网站，移动设备默认的布局视口宽度远大于屏幕的宽度，设置为980px或1024px（也多是其它值，这个是由设备本身决定的），但带来的后果就是浏览器会出现横向滚动条，由于浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度浏览器

　　document.documentElement.clientWidth/Height返回的是布局视口的尺寸app

视觉视口

　　虽然独立布局视口的创造很大程度地帮助了桌面网站到手机上的转移，但咱们不能彻底无视移动端设备的屏幕尺寸。一些CSS声明与用户见到的东西有关，而与CSS的初始包含块无关。而且，有时候知道用户看到了网站的哪些部分对web开发者会有帮助iphone

　　视觉视口是用户正在看到的网站的区域，对于的javascript属性是window.innerWidth/Heightide

　　[注意]安卓webkit2和代理浏览器存在兼容问题布局

　　缩放会影响视觉视口的大小。当缩放程度是100%时，视觉视口与设备屏幕同样宽。放大使视觉视口变得更小，由于屏幕上显示的CSS像素更小了，而缩小会让视觉视口更大，由于屏幕上的CSS像素更多了。所以缩放程度和视觉视口的大小是逆相关的：放得越大，视觉视口越小　性能

　　以iphone5为例，浏览器布局视口的宽度默认是1024px，屏幕宽度只有640个设备像素，DPR为2，因此CSS像素是320px。如今用户从100%放大到200%，CSS像素被放大，直到屏幕上只有160个CSS像素。可是，布局视口仍然保持在1024px，因此页面中的元素并无改变大小。

　　[注意]当用户缩放时，只有视觉视口的尺寸会发生改变，布局视口不会改变。移动端的缩放不会致使CSS布局被从新计算。因为在手机上会常常发生缩放，而且手机的处理器工做得很慢，电池消耗地很快，所以不从新进行布局对性能来讲有很大的好处

　　//如下代码表示3秒后，页面缩放从100%到200%

<script>
test.innerHTML = '屏幕宽度:' + screen.width + '<br>视觉视口:' + window.innerWidth;
setTimeout(function(){
    var meta = document.getElementsByTagName('meta')[1];
    meta.setAttribute('content','initial-scale=2');
    test.innerHTML = '屏幕宽度:' + screen.width + '<br>视觉视口:' + window.innerWidth;
},3000);
</script>

理想视口

　　默认状况下，一个手机或平板浏览器的布局宽度是980或1024像素。虽然这能让桌面网站不被压扁，可是这并不理想，尤为对于手机用户，由于在狭窄的屏幕上更适合一个狭窄的网站

　　换句话说，布局视口的默认宽度并非一个理想的宽度。这就是为何苹果和其余效仿苹果的浏览器厂商，会引进理想视口。它是对设备来讲，最理想的布局视口尺寸。显示在理想视口中的网站拥有最理想的浏览和阅读的宽度，用户刚进入页面时也再也不须要缩放

　　只有当网站是为手机准备的时候才应该使用理想视口。只有主动地往页面里添加meta视口标签时理想视口才会生效。若是没有meta视口标签声明，那么布局视口将会维持它的默认宽度，理想视口只有当显式地使用它的时候才会产生影响

//这一行代码告诉浏览器，布局视口的宽度应该与理想视口的宽度一致
<meta name="device" content="width=device-width">

　　定义理想视口是浏览器的工做，而不是设备或操做系统的工做。所以，同一设备上的不一样浏览器拥有不一样的理想视口。例如，三星galaxy pocket上的安卓webkit的理想视口是320*427px，而opera mobile12的则是240*320px。可是，浏览器的理想视口的大小也取决于它所处的设备。三星galaxy s4上的chrome的理想视口是360*640px，可是在nexus7上，则是601*962px。缘由很明显：Nexus7是一个平板，它拥有更宽的屏幕，所以理想视口也应该更宽

　　screen.width/height返回是理想视口的尺寸

　　[注意]当设备方向改变时，iphone中理想视口screen.width/height的值并不会改变，但安卓设备会改变。而布局视口document.documentElement.clientWidth和视觉视口window.innerWidth的值，苹果和安卓都会改变

meta视口

　　meta视口标签存在的主要目的是让布局视口的尺寸和理想视口的尺寸匹配。它由apple发明，其余手机和平板复制了它的大部份内容。桌面浏览器不支持，也不须要它，由于它们没有理想视口的概念。IE是一个例外：在手机上它支持meta视口标签，但最好使用@-ms-viewport

　　meta视口标签应该被放在HTML文档的<head>中，而且按如下格式书写:

<meta name="viewport" content="name=value,name=value">

　　每个名/值对都是一个给浏览器发号命令的指令。它们被逗号分隔，共有6个

　　一、width:设置布局视口的宽度为特定的值
　　二、initial-scale:设置页面的初始缩放程度和布局视口的宽度
　　三、minimum-scale:设置了最小缩放程度(用户可缩小的程度)
　　四、maximum-scale:设置了最大缩放程度(用户可放大的程度)
　　五、user-scalable:是否阻止用户进行缩放
　　六、height:设置布局视口的高度(未被实现)

width

　　【0】不设置宽度

　　例如，iPhone4S若是不设置viewport，他就会默认是980px，就像把屏幕分红980份。若是设置一个元素为100px*100px，看起来就是屏幕的100/980

　　【1】把布局视口的尺寸设为一个理想的值

<meta name="viewport" content="width=device-width">

　　假如，iPhone4S若是设置viewport width=device-width，他就会是320px，就像把屏幕分红320份。若是设置一个元素为100px*100px，看起来就是屏幕的100/320

　　【2】把布局视口的尺寸设为固定宽度

<meta name="viewport" content="width=400">

　　浏览器支持的最大值是10000个像素，最小值约为理想视口的20%，安卓webkit不容许任何小于布局视口的宽度。若是你指定了一个这样的值，它会自动转换为默认布局视口，一般是980px。IE10不容许任何超出480px的值，超出的话会自动转换为布局视口的默认宽度1024px

initial-scale

　　initial-scale指令设置了页面的初始缩放程度。1表明100%，2表明200%。缩放程度是根据理想视口来计算的

当前缩放值 = 理想视口宽度  / 视觉视口宽度

　　[注意]安卓自带的webkit浏览器只有在 initial-scale = 1 以及没有设置width属性时才表现正常

　　缩放程度与视觉视口的宽度是逆相关的，越高的缩放程度意味着视觉视口越小。因此initial-scale=1时视觉视口尺寸和理想视口尺寸是同样的。initial-scale=2会放大到200%，所以视觉视口的高宽是理想视口的一半

【默认值】

　　安卓设备上的initial-scale并无默认值，而在iphone和ipad上，不管viewport设置的宽度是多少，若是没有指定默认的缩放值，则iphone和ipad会自动计算这个缩放值，以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的　

【1】width=device-width,initial-scale=1

　　IE10中当initial-scale为1时，它在横屏模式下宽度保持着320px，但width=device-width时它会从320px变为480px

　　因此为了在全部浏览器上解决这个问题，须要使用

<meta name="viewport" content="width=device-width,initial-scale=1">

【2】width=400,initial-scale=1

<meta name="viewport" content="width=400,initial-scale=1">

　　把布局视口的宽度设为400px，而后再把它设为理想视口的宽度。结果浏览器选择了每一个方向最大的尺寸。所以早期的iphone手机在竖屏模式下的布局视口宽度是400px(320px和400px中较大的值)，在横屏模式下是480px(480px和400px较大的值)

　　所以，能够给布局视口设置一个最小宽度，并在设备和方向上有需求时容许浏览器将布局视口设得更宽

minimum-scale和maximum-scale

　　没有这些指令的时候，浏览器容许用户的缩放级别达到5(20%-500%);有这些指令的时候，范围可扩大到10(10%到1000%)。更高的缩放程度不被支持，所以设置maximum-scale=20和设置maximum-scale=10的效果是同样的。安卓webkit不支持minimum-scale。一样，它的缩放范围是4(25%-400%)，而且不支持改变这个范围

user-scalable

　　user-scalable=no表示禁止缩放

【改变meta视口标签】

　　在大多数浏览器中，能够改变meta视口标签，假设meta视口是文档中的第一个meta标签

var meta = document.getElementsByTagName('meta')[0];
meta.setAttribute('content','width=400');

　　咱们没法经过移除meta标签来使布局视口变回它默认的宽度。但能够把它设为一个固定的值。例如，若是想提供"切换到桌面布局"的功能，能够把宽度设为980px或1024px

【经常使用meta视口标签】

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

　　该meta标签的做用是让当前viewport的宽度等于设备的宽度，同时不容许用户手动缩放

【IOS9+专用属性】

"shrink-to-fit=no"

　　使用Viewport元标记"width=device-width"会致使页面缩小以适应溢出视口边界的内容。能够经过添加"shrink-to-fit=no"到meta标签来覆盖此行为，增长的值将阻止页面缩放以适应视口

总结

　　在桌面浏览器中，浏览器窗口就是约束CSS布局的视口。而在手机端，布局视口会限制CSS布局；视觉视口表示浏览器的可视区域，决定用户看到什么；理想视口是对于特定设备的特定浏览器的布局视口的一个理想尺寸