189 8069 5689
这篇文章主要讲解了“如何利用css @viewport 做设备适配”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何利用css @viewport 做设备适配”吧！
网站建设哪家好，找成都创新互联！专注于网页设计、网站建设、微信开发、小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了乐东黎族免费建站欢迎大家使用！
在需要调整设备浏览器的viewport时，我们通常在HTML中使用来解决。但是令人意想不到的是，viewport meta标签并不具有“规范性”，即它不是W3C的正式标准，也非Web标准。
Apple公司率先在其iPhone中的Safari浏览器中实现了viewport meta标签，其他浏览器厂商也快速采纳了它。由于IOS、Android及类似平台在平板电脑和智能手机设备中的流行度和市场占有率，使得viewport meta标签被广泛使用。
viewport meta标签是用做布局的，这种活本应属于CSS的职能。这也是为什么W3C正在尝试规范一种新的设备适配方法的原因，将HTML对viewport的控制转交给CSS。
@viewport CSS 规则
使用@viewport规则控制viewport，与使用meta标签的效果相同，只是我们完全使用CSS来控制。与使用meta标签一样，仍然建议使用设备无关的值（device-width）来设置viewport宽度。
代码如下:
@viewport {
width: device-width;
}
如今，也有很多开发者已经在使用@viewport了，因为在IE10的捕捉模式（snap mode）下，Windows 8 Metro模式下的一个特性，可以将浏览器拖至屏幕的左端或右端，同时使用两个窗口。奇怪的是， 要解决这个问题，开发者就要使用上面介绍的device-width方法，或者在media query里面使用@viewport规则。
@viewport 与 Media Queries配合使用
我们可以在media query里面使用@viewport，已达到更加精准的优化。比如，下面的media query将viewport小于400px（IE10 的 捕捉模式）缩放至320px宽。
代码如下:
@media screen and (max-width: 400px) {
@-ms-viewport { width: 320px; }
...
}
@viewport 描述符（Descriptors）
zoom描述符等同于viewport meta 标签的initial-sacale属性。
代码如下:
@viewport {
width: device-width;
zoom: 2;
}
与minimum-scale, maximum-scale对应的描述符是max-zoom, min-zoom。
代码如下:
@viewport {
width: device-width;
max-zoom: 3;
min-zoom: 0.50;
}
user-zoom与user-scalable属性等效。
代码如下:
@viewport {
width: device-width;
user-zoom: fixed;
}
浏览器支持情况
IE10/11 , opera, webkit, moz 都已支持，，且需要厂商前缀。
代码如下:
@-webkit-viewport {
width: device-width;
}
@-moz-viewport {
width: device-width;
}
@-ms-viewport {
width: device-width;
}
@-o-viewport {
width: device-width;
}
@viewport {
width: device-width;
}
所以，目前我们还是需要viewport meta 标签。
后记
用此方法可以解决 Windows Phone IE浏览下， 定位在底部（bottom:0）的元素与底部有间距的问题。
感谢各位的阅读，以上就是“如何利用css @viewport 做设备适配”的内容了，经过本文的学习后，相信大家对如何利用css @viewport 做设备适配这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！