本文介绍如何通过HTML标签、X-UA-Compatible及viewport元数据标签优化网页在不同浏览器和设备上的兼容性和显示效果。
1.HTML标签要改成这样，意思就是在原来的html后加上lang="zh=CN"
<!DOCTYPE html>
<html lang="zh-CN">
...
</html>
2.X-UA-Compatible定义浏览器的渲染方式
如果提供了如谷歌、火狐等浏览器，会默认使用这两款浏览器（基本不存在兼容问题）直接渲染页面、如果当前用户使用的IE或者IE内核的浏览器（360、QQ浏览器、搜狗）。 bootstrap为了解决IE兼容的问题，可以直接在页面中声明使用当前IE中哪个版本进行渲染。 即使当前用户使用的是IE6. bootstrap在渲染页面的时候也使用edg版本加载。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
3.为了确保适当的绘制和触屏缩放，需要在 < head> 之中添加 viewport 元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1">
在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
扫一扫
2709
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
