移动端常用的meta标签、link和@import的区别移动端常用的meta标签渲染模式视口width=device-w

移动端常用的meta标签

渲染模式

    <!-- 渲染引擎渲染模式，移动端基本上都是webkit、blink内核 -->
    <meta name="renderer" content="webkit" />
    <!-- 默认IE兼容模式 -->
    <meta name="renderer" content="ie-comp" />
    <!-- 默认IE标准模式 -->
    <meta name="renderer" content="ie-stand" />
    <!-- IE浏览器在IE8版本开始提供的特性，规定IE浏览器在解析网页时，使用文档的模式，IE-edge就是使用IE最高的版本渲染，不要向后兼容 -->
    <meta http-equiv="X-UA-Compatible" content="IE-edge" />

视口

width=device-width视口宽度为设备的宽度
initial-scale初始缩放大小：1倍（原型
maximum-scale最大缩放
user-scalable=no不允许缩放，写了这个就可以不用写maximum-scale

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

link和@import的区别

从属关系的不同：link属于html标签，不仅可以引入css文件，还可以定义RSS，通过rel关联属性；@import属于css里的关键字，只能用来引入css文件
加载顺序不同：link引入css文件是同时加载的（异步处理），@import在页面加载完毕后才会被加载（影响不大）
兼容性：link不存在兼容性问题；@import IE5+才兼容（基本上是可以忽略这个问题的）
DOM操作：link可以被DOM操作
@import会在最上面添加样式，而不是最下面，会被忽略