移动浏览器上的问题
移动浏览器和桌面浏览器最明显的区别就是屏幕大小。移动浏览器显示为桌面浏览器设计的网页效果通常不理想；要么必须放大才能看清，要么只显示网页的一部分来适应屏幕。
移动设备的屏幕比桌面设备的小得多，假设是400px宽。
这里最重要的问题在CSS上，尤其是viewport的属性，如果我们将桌面浏览器的模式复制过来，样式会变的非常古怪。
让我们回到前面例子中的那个有width:10%属性的侧边栏来讨论。如果移动浏览器和桌面浏览器一样的做法。那么这个元素最多只有40px款，这显然是非常窄的，页面的排版会变得很糟糕。
所以移动浏览器的开发者想提供更好的用户体验，可以认为是"尽可能和桌面浏览器显示效果相同"的体验。因此，一些花招是很有必要的。
两个viewport
viewport太窄了。那么最显而易见的解决办法就是让viewport变宽，那么，将viewport一分为二：visual viewport 和 layout viewport。
George Cummins有这样一个比喻
：
“想象layout viewport是一幅很大的无法改变大小和形状的画。现在你有一个小一点的边框框，通过它你来欣赏这一幅画，这个边框被不透明的材料包围使你可 以看到全部或者画的一部分，你能看到的这一部分就是visual viewport。你可以后退一点(缩小)来看这一整副画，也可以走进一点(放大)来只看一部分。你也可以改变边框的方向，但是这幅画的大小和形状(layout viewport)一直都不会被改变。
”
visual viewport是当前显示在屏幕上的页面的一部分。用户可以滚动来看页面的其它部分，或者缩放改变visual viewport的大小。
然而，CSS排版时，尤其是百分比表示的宽度，是相对layout viewport来计算的，通常比visual viewport要宽。
因此，<html>元素初始时具有layout viewport的宽度，这保证了你的网页的排版行为和桌面浏览器一致。
layout viewport有多宽呢？各个浏览器都不同。Safari iPhone使用980px，Opera使用850px，Android WebKit使用800px，IE使用974px。
缩放
显然，两个viewport都是以CSS像素为单位。当由于缩放导致visual viewport的尺寸变化时(如果你放大，屏幕中会有更少的CSS像素)，layout viewport的尺寸保持不变。(如果不是这样，你的页面将会不断地重排版)
理解layout viewport
为了理解layout viewport，我们首先需要看看当页面被完全缩小时发生了什么(将页面缩小到适应屏幕)，很多浏览器初始时以这种模式显示网页。
关键点是：浏览器选择的layout viewport尺寸，能在完全缩小模式下使网页覆盖整个屏幕(因此等于visual viewport)。
因此，layout viewport 的宽度和高度等于所有内容能够在完全缩小模式下显示到屏幕上的大小。当用户缩放时，layout viewport仍旧保持不变。
(这只是一般比较常见的情况，后面会分析一些情况下完全缩小模式时layout viewport并不等于visual viewport)。
layout viewport 宽度总是保持不变。如果你旋转你的手机，visual viewport发生变化，但是浏览器会通过一些缩放来使layout viewport再次和visual viewport一样宽。
这时layout viewport的高度有一些影响，它大体上会比竖屏模式时小一点，但是网页开发者通常不考虑高度，只关心宽度。
Viewport的尺寸
我们现在有两种viewport，但是幸运地是桌面浏览器留给了我们两对属性，我们可以通过
document.documentElement.clientWidth和
Height来获取layout viewport的尺寸
。
设备屏幕的方向对高度有影响，但是对宽度没有影响。
visual viewport的属性
至于visual viewport，可以通过window.innerWidth/Height来获取。显然，它的尺寸会由于用户放大或者缩小发生改变。
不幸地是，这里有一个兼容性的问题，还有许多浏览器需要添加对visual viewport尺寸的支持，目前，还没有浏览器将这个尺寸存放在其他的属性中，所以我猜测window.innerWidth/Height是一个标准，尽管并没有被很好地支持。
屏幕
在桌面浏览器中，screen.width/height返回的是屏幕的大小，以设备像素为单位。作为一个网页开发者，在桌面浏览器上你应该永远不会需要这个信息。你关心的不是屏幕的物理尺寸，而是有多少CSS像素可以填在里面。
缩放比例
直接获取缩放比例是不可能的，但是你可以通过用screen.width除以window.innerWidth来获取。当然，只有在这两个属性都被很好地支持时才有用。
幸运地是缩放比例通常并不重要。你需要知道的是当前屏幕中有多少CSS像素，你可以通过window.innerWidth属性来获取。
滚动偏移
通常你还想知道的是visual viewport相对与layout viewport的当前位置，也就是滚动偏移，和桌面浏览器一样，它被存放在window.pageX/YOffset中。
<html>元素
和桌面浏览器一致，document.documentElement.offsetWidth/Height返回整个html元素的大小，以CSS像素为单位。
Media queries
Media queries和桌面浏览器一样，width/height使用layout viewport作为参考，device-width/height使用设备屏幕作为参考。
换句话说，width/height反映document.documentElement.clientWidth/Height的大小，而device-width/height反映screen.width/height的大小。
那么哪一个尺寸对网页开发者来说意义更大，我不知道。。。
我开始认为是device-width，因为它给我们关于我们正在使用的设备的信息。例如，你可以改变你的排版宽度来适配不同宽度的设备屏幕。然而，你可以通过<meta viewport>做这种事，似乎没有必要使用device-width的media query。
那就是width更重要一些？可能是，他给我们了浏览器开发者认为这个设备上对一个网页来说比较合适的宽度。但是这相当含糊，而且width的media query没有给出任何其它的信息。
所以我不确定了。现在我们认为media query更重要的作用是来辨别是在桌面，平板，或者移动设备上，但是在具体辨别不同的平板或者移动设备上没多大作用。
事件坐标
不幸地是，在12个浏览器的测试中，只有Symbian WebKit和Iris提供了所有的三种参考坐标。其他浏览器都或多或少有些问题。
pageX/Y仍然是相对与页面，以CSS像素为单位，这也是目前三种坐标中最有用的一种，桌面浏览器也是这样。
clientX/Y是相对于visual viewport的坐标，以CSS像素为单位。说实话，我不太明白这个坐标的好处。
screenX/Y是相对于屏幕的坐标，以设备像素为单位。实际上它和clientX/Y使用的同样的参考系，只是单位不一样。
Meta viewport
最后，我们来讨论一下<meta name="viewport" content="width=320">；这最初是Apple的扩展属性，但是现在被很多浏览器使用。它的作用是调整layout viewport的大小。为了理解这么做的必要，让我们先后退一步。
假设你写了一个简单的页面，其中的元素都没有width。现在它们会伸展来占据layout viewport的100%宽度。大部分浏览器缩小页面来在屏幕上显示整个layout viewport，效果大概是这样：
所有用户都会马上进行放大操作，这个Ok，但是大部分浏览器保持网页中元素的宽度不变，这使得其中的文字较难阅读。
(这里最明显的另外是Android Webkit，它事实上会减小包含文字的元素的排版宽度来适应屏幕。这个设计很好，我觉得所有浏览器都应该这么做。)
现在你可以试着设置html {width: 320px}。现在<html>元素会缩小，所有其他元素也是，他们现在占据320px的100%。这个在放大之后显示比较不错，但是在页面初始显示时，像是一种缩小的页面，屏幕中大部分地方没有内容。
为了解决这个问题，Apple发明了meta viewport标签。当你设置<meta name="viewport" content="width=320">时，你设置了layout viewport的宽度为320px。现在页面的初始状态也正确了。
你可以设置layout viewport的宽度为任何你想要的尺寸，包括device-width，它会使用screen.width(以物理像素为单位)来作为参考调整layout viewport的大小。
扫一扫
561
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
