1.移动端基础

#1.1.屏幕

移动端和pc端开发差异比较大的就是屏幕了，这里说的差异主要体现在移动端大屏幕碎片化，各种尺寸和各种分辨率的机型非常多，所以，移动端需要解决的问题就是如何去适配各种屏幕尺寸，后面我们有单独章节来讲如何适配，在这里需要先科普一些基础知识

1.什么是屏幕尺寸？

image

屏幕的尺寸指的是对角线的长度，单位一般用英寸

2.什么是分辨率？

分辨率指的是屏幕水平和垂直方向上像素点的个数，一般用px来做单位，比如：移动端分辨率19201080就表示水平方向上有1080个px，垂直方向上有1920个px，在pc端有点不一样，pc端的19201080，表示的是水平方向有1920个像素，垂直方向有1080个像素点

#1.2.像素密度

像素密度表示屏幕每英寸的像素数量，像素密度英文简称PPI(Pixels Per Inch),这个概念是借鉴印刷行业中的DPI而来，DPI(Dots Per Inch)表示打印机每英寸可以喷的墨汁点数，把这个墨汁点换成像素点就可以了。DPI和PPI都可以被称为像素密度，但是PPI应用更广泛

PPI如何计算？以iphone6为例，分辨率是1334*750，尺寸是4.7英寸

image

根据勾股定理，我们可以计算出4.7英寸这条对角线上有多少个像素点，然后把这个像素点除以4.7英寸，就知道了每英寸上有多少个像素点，计算出来的值就是PPI，我们通过js来计算

var ppi = Math.sqrt(Math.pow(1334, 2) + Math.pow(750, 2)) / 4.7
console.log(ppi)

Retina屏是什么？Retina屏又叫做视网膜屏，是苹果注册了的一种命名方式，指的是在正常视线距离内肉眼很难看到像素的屏幕，一般手机屏幕达到300ppi就可以叫做retina屏幕

#1.3.像素详解

#1.设备像素(物理像素)

一个物理像素是屏幕上最小的物理显示单元，在操作系统的调度下，每个设备像素都有自己的颜色值和亮度值，通常我们买手机的时候看的屏幕分辨率参数就是物理像素，比如：华为p30的分辨率2340*1080，这里指的是横向有1080个物理像素，垂直方向2340个物理像素

#2.设备独立像素(密度无关像素)

设备独立像素可以认为是计算机坐标系统中的某一个点，这个点代表一个可以由程序使用的虚拟像素,比如css像素，相关的系统会把这个虚拟像素转换为物理像素显示，所以物理像素和设备独立像素之间是存在一种对应关系的

#3.设备像素比

前面我们说到物理像素和设备独立像素之间存在一定的对应关系，这个对象关系就是设备像素比，简称dpr，它的公式为：

设备像素比 = 物理像素/设备独立像素

image

通俗的说设备像素比的作用就是用n个物理像素区显示一个css像素，举个例子，dpr为1的时候，一个物理像素刚好对应一个css像素，dpr为2的时候，4个物理像素对应一个css像素

#1.4.模拟调试工具

1.谷歌自带的调试工具

image

2.真机调试

我们使用nodejs来开启一个调试服务器，所以在使用真机调试的时候，需要安装好nodejs环境，nodejs下载地址： https://nodejs.org/en/

一般选择长期支持版本：

image

下载以后，和普通软件安装一样把nodejs安装好就可以了，这里不描述安装过程

接下来我们需要用nodejs自带的包管理工具，安装好一个服务器，打开命令行工具，输入命令：

npm i live-server -g 

这个服务器安装好以后，进入到你的项目目录，然后执行命令：

live-server

服务启动后，通过http://127.0.0.1:8080/ 即可访问到我的项目目录，假如我的项目目录下有个test.html的文件，我现在要访问这个test.html做调试，那么我需要访问：http://127.0.0.1:8080/test.html

以上步骤，只是让我们在电脑上启动了一个服务器来管理我们开发的项目，接下来需要连接真机测试，这个时候需要注意一个关键的步骤，那就是让手机和电脑连接在同一个局域网内（同一个wifi），这个时候ip段是一样的才能访问，举个例子： 我的电脑ip为：192.168.31.30，我只需要在手机端访问：http://192.168.31.30:8080/test.html 就可以打开相应页面了

2.搞定视口相关概念

#2.1.pc端视口

视口可以理解为可视区窗口，就是浏览器显示页面内容的区域，在pc端我们基本上不会去提视口这个概念，默认情况下，视口就等于浏览器可视区窗口大小

#2.2.移动端视口

pc端是以浏览器作为视口的，如果移动端也以浏览器作为视口就会比较窄，因此，引入布局视口、视觉视口、理想视口这些概念，让移动端的视口和浏览器的宽度不再关联

1.layout viewport,布局视口

在移动端视口并不和浏览器相关联，而是重新定义了视口的概念，默认会有一个布局视口，css的布局会根据它来计算，并且约束它, image

2.visual viewport,视觉视口

视觉视口是用户正在看到的网站的区域。用户可以通过缩放来操作视觉视口，同时不会影响布局视口，布局视口仍保持原来的宽度。编程时可以不用管这个视口

3.ideal viewport,理想视口 布局视口的默认宽度并不是一个理想的宽度，所以苹果公司引入了理想视口的概念

理想视口：它是对设备来说最理想的布局视口尺寸。显示在理想视口中的网页拥有最理想的浏览和阅读的宽度，用户刚进入页面时不再需要缩放。

移动端布局的关键就是把布局视口设置成理想视口

4.视口设置

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

#2.3.移动端的其他常规设置

<!-- QQ强制横屏或者竖屏显示  在移动端基本上都强制竖屏显示-->
<meta name="x5-orientation" content="portrait|landscape">

<!-- QQ 设置全屏 -->
<meta name="x5-fullscreen" content="true">

<!-- UC强制竖屏或横屏显示 -->
<meta name="screen-orientation" content="portraint|landscape" >

<meta name="full-screen" content="yes" >

<!-- 禁止识别电话号码和邮箱地址 -->
<meta name="format-detection" content=telphone=no, email=no" >

<!-- 拨打电话和发邮件 -->
href="tel:13890908990"
href="mailto:cnode@sina.com"

#2.4.默认样式

/* 清除高亮颜色 */
a,input,button {
  -webkit-tap-highlight-color: rgba(0,0,0,0)
}

/* 清除默认圆角 */

input, button {
  -webkit-appearance: none;
  border-radius: 0
}

/* 默认字体设置 */

body {
  font-family: Helvetica;
}

/* 禁止文字缩放 */