html5 移动端-2

为什么使用移动端适配

1. 随着时代的发展，在移动端访问pc端的页面，逐渐常态化；
2. 手机的尺寸，碎片化越来越严重，碎片化：五花八门，种类繁多

布局视口：就是整个页面的布局一般都是浏览器厂商给定的固定值
视觉视口：浏览器可视区域的大小，也就是用户可以通过设备宽度看到的内容。
理想视口：布局视口虽然解决了移动端查看pc端网页的问题，但是完全忽略了用户手机本身的尺寸所有苹果公司引入了理想视口，他对设备来说最理想的，布局视口用户不需要对页面进行缩放就可以完美展现，最简单的做法就是使布局视口的宽度改成屏幕的宽度。

两个像素

css像素：（独立像素，逻辑像素）在css中使用的长度单位px，在pc端1物理像素等于1px 但是在移动端1物理像素不等于1px；
物理像素：屏幕的物理像素，又被成为设备像素，他是显示设备中， 一个最微小的物理部件。任何设备的物理像素出厂的时候就确定了，且固定不变设备像素比 :简称为dpr，他是物理像素 和独立像素的对应关系(也即是比例)
备注:判断是否为高清时，看一下dpr的值是否大于1，一般情况下dpr为整数但是一些安卓的机型不为整数：通过window.devicePixelRatio获得

   <script type="text/javascript">
        console.log(window.devicePixelRatio)
   </script>

移动端的测试方法

1. 谷歌浏览器提供的虚拟机
2. 电脑和手机在同一局域网内扫描编译器提供的二维码
3. 搭建本地服务器，来建立访问

meat标签：告诉浏览器的设置信息（必须和上面分开写），理想视口的重要元素，主要用于将布局视口的尺寸和理想视口尺寸匹配。
meat视口标签的5个指令；
width设置布局视口的宽度，一般都是device-width(设备库宽)
initial-scale:初始比例1为100%；2为200% …
minmum-scale：最大缩放比例
maxmun-scale：最小缩放比例
user-scalable：是否允许用户缩放

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

写移动端必须带viewport