移动端（一）—— 移动端概念

移动端相关概念

之前一直在用github博客，但是发现上传图片和在别人访问的问题上很不友好，所以现在改用csdn博客，下面正文。

个人现在在研究移动端，但是对于移动端的相关概念等等，原理性问题一直不了解，然后研究了几天，先来说说移动端概念上的东西。

1.1 移动端（wap）与pc端有以下三个特点：

1. 系统
   pc：windows/mac（区别不大）
   移动端：ios/android/windows（有区别）
2. 浏览器
   pc：区别很大
   移动端：区别不大
3. 分辨率（尺寸）
   pc：有区别
   移动端：区别很大

1.2 Tips:手机如何访问电脑的页面

1. 打开cmd，输入ipconfig回车。
2. 找到ipv4的地址，复制。
3. 在hbuilder里面用浏览器打开你的网页。
4. 用刚才的IPV4的地址替换掉打开网页的地址的前面的ip地址。
5. 复制第四步的新地址，通过二维码生成器生成网址二维码，手机扫码访问。

1.3 像素的相关概念

1. 设备独立像素（逻辑像素，就是在控制台手机显示上面显示的像素）与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素
   屏幕的大小，屏幕的尺寸（别名叫点，是个单位）；
   获取：window.screen.width/window.screen.height
   注意：
   
   1. 横竖屏切换的时候，真机里的这个值不会变，但在模拟器里是会切换的
   2. 在一个点里，可以放下多个像素
   3. 这个值是可以被改变的（通过后面讲的缩放）

2. 设备像素（物理像素）设备能控制显示的最小单位，我们常说的1920×1080像素分辨率就是用的设备像素单位
   屏幕分辨率（实际放的像素值），买手机的时候厂家告诉你的分辨率
   这个值是虚拟的，无法获取

3. CSS像素（CSS Pixel）：适用于web编程，指的是我们在样式代码中使用到的逻辑像素，是一个抽象概念，实际并不存在

4. 像素比（DPR，这个值无法修改）
   缩放的比例=设备像素/设备独立像素
   获取：window.devicePixelRatio

   例如：iphone6
   375*667 设备独立像素，屏幕尺寸
   750*1334 设备像素，屏幕分辨率
   2 像素比

   https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

5. PPI（像素密度，每英寸所拥有的像素数） PPI越大，越清晰，PPI在320以上为高密度，是高清屏，retina显示屏。计算公示：
   PPI = (√(横向pixel)^2+(纵向pixel)^2)/屏幕尺寸
   iphone6:（分辨率为1080*1920，屏幕尺寸为5.2英寸）
   PPI = (√1920^2+1080^2)/5.2
   

1.4 viewport

视口（可视区窗口），通过meta标签设置，这个必须设置，才能会告诉浏览器是移动端，否则浏览器还会按照正常的宽度一般（980）显示

• 没有设置viewpoint的表现
  
  1. 屏幕的宽度一般为980，但不同的型号也会不同
  2. 真机与模拟器的值也会不同
  3. 用window.innerWidth/window.innerHeight方法获取

• 参数设置：
  content 视口里的相关设置

  • width： 屏幕的宽度，一般取值为device-width（默认值），即设备的实际宽度。不建议设置为数字
  • user-scalable：是否允许缩放，yes or no

  //一般来说只设置上面就行了，设置下面更完整，可以防止第三方软件将文字等缩放

  • initial-scale：初始比例
  • minimum-scale：最小能够缩放的比例
  • maximum-scale：最大能够缩放的比例

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• 注意：
  
  1. 如果允许缩放，就把width与user-scalable去掉
  2. 用了缩放后，并不是真正的缩放了，而是改变了屏幕的尺寸（设备独立像素）。

1.5 像素比

viewport里的宽度设置成device-width后

1. 宽度不变，像素会变化
   宽度是多少在移动端页面与pc端页面里是一致的，不会变化。但是像素会变化，一个像素会变成多个像素显示，变成的数量由像素比决定

2. 设计图要根据设备像素（屏幕分辨率）去定大小，至少宽度要在750以上（一般会以750的宽为基准），所以一般我们代码设置的样式是我们的逻辑像素，要根据设计稿的尺寸按dpr的比例进行调整。

3. 对于像素比为2以上的话，图片的尺寸是两倍，正好能够显示高清，但是对于像素比是1的话，图片的体积就过大了，会浪费很多流量，并且图片会自动压缩，效果还是会有一点差别（适配解决），例如750px的图片，在iphone6（375*667）上会显示高清，因为dpr为2，一个像素点里面容纳两个像素，而375个像素点就有750个像素，750px的图片正好对应，而375px的图片是750px的一半，也就是它要取图片的近似色来填充多出来的像素，就使得图片变模糊。