利用css @viewport 做设备适配

在网页开发中，我们经常遇到需要调整设备浏览器视口（viewport）的情况。这时，我们通常在HTML中使用viewport meta标签来解决。令人惊讶的是，这个viewport meta标签并没有“规范性”，它既不是W3C的正式标准，也不是Web的标准。

Apple公司率先在其Safari浏览器中实现了viewport meta标签，其他浏览器厂商也迅速采纳了这一做法。由于iOS、Android等智能设备在市场上的普及，viewport meta标签已经成为了一种广泛使用的解决方案。

实际上，viewport meta标签原本应该是用于布局设计的，这是CSS的职责范畴。W3C正在努力制定一种新设备适配方法，将HTML对viewport的控制交给CSS。

这就是@viewport CSS规则的出现。通过使用@viewport规则，我们可以达到与viewport meta标签相同的效果，但完全是通过CSS来实现的。同样推荐使用设备无关的值（device-width）来设置viewport的宽度。这样写:@viewport { width: device-width;}。

很多开发者已经开始使用@viewport规则。例如，在IE10的捕捉模式下（snap mode），浏览器可以同时在左右两端拖动显示两个窗口。为了解决这个问题，开发者需要使用前面提到的device-width方法或在media query中使用@viewport规则。这在狼蚁网站SEO优化的过程中尤为重要，当视口小于px时（针对IE10的捕捉模式），它们将视口缩放至320px宽。代码如下:@media screen and (max-width: px) { @-ms-viewport { width: 320px; } ...}。

@viewport还支持许多描述符（descriptors），如zoom描述符对应于viewport meta标签的initial-scale属性。这意味着我们可以这样写:@viewport { width: device-width; zoom: 2;}来设置视口的放大效果。与之类似，min-zoom和max-zoom描述符分别对应于minimum-scale和maximum-scale属性。还有user-zoom描述符与user-scalable属性等效。浏览器支持情况方面，IE10/11、Opera、Webkit和Moz都已经支持这一技术，但需要添加厂商前缀。

虽然现在我们仍然需要依赖viewport meta标签来解决一些特定问题（比如在Windows Phone IE浏览器下定位在底部的元素与底部有间距的问题），但@viewport CSS规则为我们提供了一个更加规范、更加灵活的方式来控制视口设置。这对于响应式设计和跨设备兼容性至关重要。