移动浏览器的问题
当我们将移动浏览器与桌面浏览器进行比较时，最明显的区别是屏幕尺寸。移动浏览器显示的桌面优化网站显着少于桌面浏览器; 通过缩小直到文本不可读的小，或者只显示适合屏幕的网站的一小部分。
移动屏幕远小于桌面屏幕; 考虑最大宽度为400px，有时候要少得多。（有些手机报告的宽度较大，但是它们在说谎 - 或者至少给我们无用的信息。）
平板电脑设备的中间层，如iPad或传闻中的基于HP webOS的平板设备，将弥合桌面和移动设备之间的差距，但这不会改变根本问题。网站也必须在移动设备上运行，因此我们必须让它们在小屏幕上显示。
最重要的问题集中在CSS上，尤其是视口的尺寸。如果我们一对一地复制桌面模型，我们的CSS就会开始惨不忍睹。
让我们回到我们的侧边栏吧width: 10%。如果移动浏览器与桌面浏览器完全相同，那么它们最多只能使用40px宽的元素，而且这个元素太窄了。你的液体布局看起来会非常可怕。
解决问题的一种方法是为移动浏览器构建一个特殊网站。即使除了你是否应该这样做的基本问题之外，实际问题是只有极少数网站所有者被充分利用以专门用于移动设备。
移动浏览器供应商希望为他们的客户提供最佳体验，现在这意味着“尽可能像桌面一样。”因此需要一些技巧。
两个视口
因此视口太窄而无法作为CSS布局的基础。显而易见的解决方案是使视口更宽。但是，这需要将其拆分为两个：可视视口和布局视口。
乔治·康明斯最能解释的基本概念在这里的堆栈溢出：
想象一下，布局视口是一个不会改变大小或形状的大图像。现在图像你有一个较小的框架，通过它你可以看到大图像。小框架被不透明材料包围，这些材料遮挡了除大部分图像之外的所有部分的视图。您可以通过框架看到的大图像部分是可视视口。您可以在保持框架的同时远离大图像（缩小）以一次查看整个图像，或者您可以靠近（放大）以仅查看一部分。您也可以更改框架的方向，但大图像（布局视口）的大小和形状永远不会更改。
另见克里斯的这个解释。
该视觉视口的是，因此目前在屏幕上显示的页面的一部分。用户可以滚动以更改他看到的页面部分，或者缩放以更改可视视口的大小。
但是，CSS布局（尤其是百分比宽度）是相对于布局视口计算的， 布局视口比视觉视口宽得多。
因此，<html>元素最初采用布局视口的宽度，并且您的CSS被解释为屏幕明显比手机屏幕宽。这可确保您网站的布局与桌面浏览器上的布局相同。
布局视口有多宽？这与浏览器不同。Safari iPhone使用980px，Opera 850px，Android WebKit 800px和IE 974px。
有些浏览器有特殊行为：
- Symbian WebKit尝试保持布局视口等于可视视口，是的，这意味着具有百分比宽度的元素可能表现得很奇怪。但是，如果页面由于绝对宽度而不适合视觉视口，则浏览器会将布局视口拉伸到最大850px。
- Samsung WebKit（在bada上）使布局视口与最宽的元素一样宽。
- 在BlackBerry上，布局视口等于100％缩放的可视视口。这不会改变。
缩放
显然，两个视口都以CSS像素为单位进行测量。但是，视觉视口尺寸随着缩放而变化（如果放大，屏幕上的CSS像素较少），则布局视口尺寸保持不变。（如果他们没有，您的页面将不断重排，因为重新计算百分比宽度。）
了解布局视口
为了理解布局视口的大小，我们必须看一下页面完全缩小时会发生什么。许多移动浏览器最初以完全缩小模式显示任何页面。
关键是：浏览器选择了布局视口的尺寸，使其在完全缩小模式下完全覆盖屏幕（因此等于视觉视口）。
因此，布局视口的宽度和高度等于在最大缩小模式下可以在屏幕上显示的任何宽度和高度。当用户放大这些尺寸时保持不变。
布局视口宽度始终相同。如果旋转手机，可视视口会发生变化，但浏览器会通过稍微放大来适应此新方向，以使布局视口再次与视觉视口一样宽。
这会对布局视口的高度产生影响，现在这个高度远远小于纵向模式。但Web开发人员并不关心高度，只关心宽度。
测量布局视口
我们现在有两个我们想要测量的视口。因此，浏览器大战为我们提供了两个属性对，这非常幸运。
document.documentElement.clientWidth并-Height包含布局视口的尺寸。
方向对于高度很重要，但对于宽度则不重要。
测量视觉视口
对于视觉视口，它是通过测量的window.innerWidth/Height。显然，当用户缩小或放大时，测量值会发生变化，因为更多或更少的CSS像素适合屏幕。
不幸的是，这是一个不兼容的领域; 许多浏览器仍然需要添加对视觉视口测量的支持。尽管如此，没有任何浏览器会将此测量值存储在任何其他属性对中，因此我认为这window.innerWidth/Height是一个标准，尽管是一个非常受支持的标准。
屏幕
与在桌面screen.width/height上一样，以设备像素为单位给出屏幕尺寸。与在桌面上一样，您永远不需要这些信息作为Web开发人员。您对屏幕的物理尺寸不感兴趣，但目前适合的CSS像素数量是多少。
缩放级别
读出直接缩放水平是不可能的，但你可以通过将得到它 screen.width的window.innerWidth。当然，只有在完全支持这两个属性时才有效。
幸运的是，缩放级别并不重要。您需要知道的是屏幕上当前有多少CSS像素。window.innerWidth如果正确支持，您可以从中获取该信息。
滚动偏移
您还需要知道的是视觉视口相对于布局视口的当前位置。这是滚动偏移，就像在桌面上一样，它存储在window.pageX/YOffset。
<html> 元件
就像在桌面上一样，以CSS像素为单位document.documentElement.offsetWidth/Height给出<html>元素的总大小。
媒体查询
媒体查询的工作方式与桌面相同。width/height使用布局视口作为参考，以CSS像素为单位测量，device-width/height使用设备屏幕并以设备像素为单位进行测量。
换句话说，width/height镜像的值document. documentElement. clientWidth/Height，而device-width/height镜像的值screen.width/height。（它们实际上是在所有浏览器中都这样做的，即使镜像值不正确。）
现在哪个测量对我们的Web开发人员更有用？重点是，我不知道。
我开始认为这device-width是最重要的一个，因为它为我们提供了一些我们可以使用的设备信息。例如，您可以改变布局的宽度以适应设备的宽度。但是，您也可以通过使用<meta viewport>; 使用device-width媒体查询并不是绝对必要的。
那么，width毕竟更重要媒体查询？也许; 它提供了一些线索，了解浏览器供应商认为该设备上的网站宽度是多少。但这是相当模糊的，width媒体查询并没有真正提供任何其他信息。
所以我还没有决定。目前我认为媒体查询对于确定您是在台式机，平板电脑还是移动设备上非常重要，但对于区分各种平板电脑或移动设备并不是那么有用。
或者其他的东西。
事件坐标
事件坐标或多或少在桌面上工作。不幸的是，在12个经过测试的浏览器中，只有两个，Symbian WebKit和Iris，完全正确。所有其他浏览器都有或多或少的严重问题。
pageX/Y 仍然是相对于CSS像素中的页面，这是三个属性对中最有用的，就像它在桌面上一样。
clientX/Y相对于CSS像素中的可视视口。这是有道理的，虽然我不完全确定它有什么好处。
screenX/Y相对于设备像素中的屏幕。当然，这与clientX/Y使用的参考相同，并且设备像素是无用的。所以我们不用担心screenX/Y; 它与桌面上的一样无用。
元视口
最后，我们来讨论一下<meta name="viewport" content="width=320">; 最初是Apple扩展，但同时被更多浏览器复制。它旨在调整布局视口的大小。为了理解为什么这是必要的，让我们退后一步。
假设你构建了一个简单的页面并且没有给你的元素width。现在它们伸展到占用布局视口宽度的100％。大多数浏览器缩小以在屏幕上显示整个布局视口，产生如下效果：
所有用户都会立即放大，这有效，但大多数浏览器保持元素的宽度不变，这使得文本难以阅读。
（这里的重要例外是Android WebKit，它实际上减少了包含文本的元素的大小，使它们适合屏幕。这绝对是非常棒的，我觉得所有其他浏览器都应该复制这种行为。我将在以后完整记录它。 ）
现在您可以尝试设置html {width: 320px}。现在<html>元素缩小了，所有其他元素都缩小了，现在占用了320px的100％。这在用户放大时起作用，但最初不是在用户遇到大部分不包含任何内容的缩小页面时。
为了解决这个问题，Apple发明了meta视口标记。设置时<meta name="viewport" content="width=320">，将布局视口的宽度设置为320px。现在页面的初始状态也是正确的。
您可以将布局视口的宽度设置为所需的任何尺寸，包括device-width。最后一个采用screen.width（在设备像素中）作为其参考，并相应地调整布局视口的大小。
不过，这里有一个问题。有时形式screen.width没有多大意义，因为像素数太高了。例如，Nexus One的正式宽度为480px，但Google工程师已决定在使用时device-width为布局视口提供480px的宽度。他们将它缩小到2 / 3rds，这样就可以device-width给你320px的宽度，就像在iPhone上一样。
如果传言新的iPhone会有更大的像素数（不一定等于更大的屏幕！），如果Apple复制这种行为，我也不会感到惊讶。也许最终device-width只意味着320px。