html的适配

html值得一说的应该就是适配

！！适配是与手机同时存在的

写好一个页面在手机端打开，会发现这个页面显示很小，那是因为设备的视口宽度viewport不等于设备宽度device-width，而页面是根据视口宽度显示的，一般来说一个手机的视口宽度是980px,而设备宽度是350px

如果测量手机的视口宽度呢，写一个红色背景颜色的宽度为980px的div和一个红色背景颜色的宽度为350px的div，在电脑打开，然后点击手机调试，会发现980px的div大概占满，而350px的只有三分之一

也就是说你在一个350px看一个980px的页面，当然会看起来很小了，还有就是这些年的手机更新换代有了2倍像素，3倍像素的屏幕，但其实设备宽度是没变的

如何让视口等于设备宽度，写一句meta标签就行，写在head标签里

• width viewport 宽度(数值/device-width)
• height viewport 高度(数值/device-height)
• initial-scale 初始缩放比例
• maximum-scale 最大缩放比例
• minimum-scale 最小缩放比例
• user-scalable 是否允许用户缩放(yes/no)

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

写上这句代码后重新查看980px和350px的div，会发现内容变大了，350px占满了，980px溢出了，而且字体大小也正常了，这个是告诫我们在手机端标签的宽度最好是用比例，块级标签默认就是百分之一百，手机端切记不能让用户横向滑动，写上这句适配后，文字就用16px，14px就是正常手机的正常显示大小了

高级些的适配，rem适配，这个在css里讲

其他meta

// utf-8 不解释
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<meta name="format-detection" content="telphone=no, email=no" />
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 设置苹果工具栏颜色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />