现有的桌面上的操作系统大多都有浏览器,浏览器可以让我们方便的浏览一个网页。 然而最初的手机浏览器访问网页是很困难的,因为它们分辨率不高、屏幕很小而且浏览器不支持众多前沿的 CSS 以及 JavaScript,使它们没有能力访问桌面版网站。那时的手机访问的网站都是专门为设备大幅度简化的版本,就像这样:

简化版本的移动网页
简化版本的移动网页

不过,直到 iPhone 的发布,这一切都得到了很大的改变。因为 iPhone 上的浏览器 —— Safari 是一个真正的且非常前沿的 Web 浏览器,而且它还支持 HTML5 标准。它配备有几乎和电脑一样的浏览器 —— 以至于它支持 CSS3 和 JavaScript。但是这一切,却是在一个宽度仅有 320 个像素的设备上显示。 然而当一个桌面浏览器宽度缩小到 320 个像素时,它就变的大不一样,当他访问一个没有对它优化的网页时,它就会将其缩放(宽度将缩放至 1/3),以百度新闻为例,若没有适配,则将现实电脑版网站,这样页面的字会很小,但是用户可以通过缩放就能够解决,所以并没有什么问题。然而,百度新闻做了一个专门为 iPhone 的版本,像这样:

百度新闻 iPhone 版
百度新闻 iPhone 版

它能够更好的适应触摸屏,并且没有了字体小的问题,也不需要缩放。但是请要注意,这个页面已经不是刚才的那个页面了,也就意味着百度需要专门重新设计一个为 iPhone 版本的网页,成本是很高的。 然而在 CSS 的帮助下,不需要准备两个网页就可以同时适配电脑和手机,它们加载到的页面相同,但是应用的样式表并不同。例如没有针对移动而优化的 Wikipedia 导航页,iPhone 上的 Safari 访问时将会缩放显示,布局就如同电脑访问一样:

没有针对移动而优化的 Wikipedia 导航页
没有针对移动而优化的 Wikipedia 导航页

然而通过增加的 CSS 样式表(当然还包括 head 中的 viewport),这个页面在手机上就会完美的显示了,就像下图:

针对移动优化了的 Wikipedia 导航页
针对移动优化了的 Wikipedia 导航页

像 Wikipedia 导航页这样先根据电脑布局设计,再新增 CSS 使其支持移动设备的网页,就是桌面优先而不是移动优先。而移动优先则正好相反,页面根据手机而设计,然后再让它适配电脑,电脑与手机也是访问同一个页面,这就属于移动优先。由于移动优先的网站是根据手机设计,自 iPhone 发布之后,很多智能手机也使用了前沿的浏览器,所以移动优先的网站自然会使用 HTML5、CSS3 中的众多新特性,大大缩短了一个网页所需要的开发时间。而且移动优先的网站根据手机的高延迟网络而设计,减少了页面大小,无论身处什么网络环境,加载速度都有很大的提升。移动优先的优点众多,这就是导致其流行起来的原因。