html5 兼容移动端参数设置的一些小细节

最新推荐文章于 2021-06-11 16:10:21 发布

weixin_33775582

最新推荐文章于 2021-06-11 16:10:21 发布

阅读量127

点赞数

原文链接：https://juejin.im/post/5a3215e7f265da431f4b16ab

版权

####head 里面的一些参数设置 ######1.设置字节编码用utf-8的形式去解析

<meta charset="utf-8">
复制代码

######2.设置兼容模式，定义用ie的引擎去解析该页面

<!-- meta:compat    快捷定义兼容模式，下面是用ie的罪行引擎去解析这个页面-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
复制代码

快捷键出来的默认方式是IE=7，可以根据你的需要去做一定的修改

<meta http-equiv="X-UA-Compatible" content="IE=7">
复制代码

######3.设置设备的宽度与可视的区域一致，兼容移动和PC设备设置宽度，和缩放

 <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
复制代码

解析：

width:device-width   设置设备的宽
initial-scale=1      设置缩放程度，1为不缩放
user-scalable=no     设置用户不可进行缩放操作

 **一般来说如果设置了用户不可以进行缩放操作，下面的设置就没有了意义

minimum-scale        设置用户的最小缩放值，为一个数字，可以带小数
maximum-scale	    设置用户的最大缩放值，为一个数字，可以带小数

复制代码

######4.条件加载第三方库（工具包）在不同的浏览器中可能需要加载一些另外一些包，来拟补之前HTML5 之前没有的标签和新特性。以及根据IE的版本重置一些默认样式。

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
复制代码

解析： 1.如果 lt（低于） IE9 则执行注释里面的代码 2.html5shiv.min.js html5 插件包，用于兼容低版本浏览器也能识别html5的标签 3.respond.min.js 重置一些基础的样式，统一各个浏览器的基础样式。 4.前面https://cdn. 是说明是从cdn 加载。

转载于:https://juejin.im/post/5a3215e7f265da431f4b16ab