《一》基础

移动端开发目前主要包括三类：

1. 原生 APP 开发：IOS、Android、Flutter、uniapp、ReactNative 等。
2. 小程序开发：原生小程序、Taro、uniapp 等。
3. Web 页面：移动端的 Web 页面，可以使用移动端浏览器或者 webview 浏览。

与移动 Web相对应的是运行在 PC 端浏览器上的 PC Web。

自适应：根据不同的屏幕大小自动调整元素的大小。
响应式：

基本概念：

像素（物理像素 physical pixel、设备像素 device pixel / dp）：

像素（物理像素、设备像素）：屏幕其实是由一个一个的点排列组成的，一个点就对应了一个由红绿蓝三色组成的小正方形，多个点通过不同的明暗对比就显示出了不同的图像。一个点就是一个像素。

不同的手机，每个像素的尺寸大小可能是不一样的。

CSS 像素（逻辑像素 logical pixel、设备独立像素 device independent pixel / dip）：

CSS 像素（逻辑像素、设备独立像素）：在实际开发 CSS 样式代码中使用的像素。

即使不同的手机，每个 CSS 像素的大小显示也是相同的。

物理像素是客观存在的， CSS 像素是人为创造出来为了方便在实际开发中使用的。
物理像素是没办法改变大小的，缩放操作改变的是 CSS 像素。
具体一个 CSS 像素对应多少个物理像素，是由系统去判断的。CSS 像素会自动换算成对应的物理像素。

分辨率：

分辨率：屏幕纵横向上的像素个数。例如：1792 * 828 的分辨率，就表示纵向有 1792 个像素，横向有 828 个像素，一共有 1792 * 828 个像素。

通过 screen.width 和 screen.height 可以获取到屏幕的逻辑分辨率。

屏幕尺寸一样的情况下，分辨率越高，单个像素尺寸就越小，显示的图像就越细腻。

设备像素比（device pixel ratio / dpr）：

设备像素比：在一个方向上，没有缩放的情况下，物理像素和 CSS 像素的比值。

通过 window.devicePixelRatio 可以获取到屏幕的 dpr 值。

屏幕尺寸一样的情况下，分辨率越高，单个像素尺寸就越小，设备像素比就越大，显示的图像就越细腻。

每英寸像素（pixels per inch/ppi）：

每一英寸上的像素数，通常用来表示一个图像或者显示器上的像素密度。

viewport 视口：

图一中，用黑色边框来代表手机。边框内部是屏幕，即可视区域。页面是专门为 PC 端设计的，因此宽度很宽，超出了手机的可视范围。页面只有落在可视区域内才能被看见，超出的部分都是看不见的，如图二。因此，在有视口之前，想要通过手机来访问专门为 PC 端设计的页面，只能看到页面的一部分，想要看到其他的部分需要拖动滚动条。

需要通过移动端设备来访问专门为 PC 端开发的网页，并且想要让网页在移动端设备中能完整地显示，才有了视口这个概念。

在 PC 端的页面中，是不需要对视口进行区分的，视觉视口和布局视口是同一个，就是浏览器的可视区域。
视口是专门为了移动 Web 开发所设计的，和 PC Web 开发没有关系。

position: fixed 就是相对于视口来进行定位的。

视口的类型：

在移动端有 3 种视口：布局视口（layout viewport）、视觉视口（visual viewport）和理想视口（ideal viewport）。

1. 布局视口：移动端设备的浏览器定义了一个虚拟的布局视口，默认宽度为 980px。页面是在布局视口中布局的。

   可以使用 document.documentElement.clientWidth 或者 document.documentElement.getBoundingClientRect().width 来获取布局视口的宽度。

   也就是说，通过手机浏览器来访问一个页面，在页面中定义的元素，默认是在 980px 宽度的视口中进行布局的。
   但手机实际的屏幕是小于 980px 的，最终还会对其进行一定比例的缩小。
   因此，使用默认的布局视口是不适合进行移动端布局的。

   在没有设置视口的情况下，通过移动端设备来访问专门为 PC 端设计的页面，移动设备会将页面视为具有固定宽度的 PC 页面，并将其等比例缩小以适应屏幕宽度。导致元素很小，看不清楚。
   

   在设置视口的情况下，通过移动端设备来访问专门为 PC 端设计的页面，默认会有一个 980px 宽度的虚拟的布局视口，会在这个视口中来布局一个页面的内容，由于这个视口还是比屏幕的宽度宽，为了可以完整地显示，会自动对整个页面进行等比例缩小以适应屏幕大小。但缩小的比例就很小了。
   

   

2. 视觉视口：可视区域，即手机屏幕的大小。

   可以使用 screen.width 来获取视觉视口的宽度，但是有兼容性问题，有时候获取到的可能是屏幕的分辨率，因此不推荐使用。

   用户可以通过缩放操作视觉视口，不会影响布局视口。

   

3. 理想视口：是指对设备来讲最理想的视口尺寸，当布局视口等于视觉视口时，就是最理想的状态，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。

   理想视口最大的作用就是不需要再缩小页面来适应屏幕大小了，因为布局视口就等于视觉视口。

   

设置视口：

通过 meta 标签，将 name 设置为 viewport，具体的内容在 content 中设置。

// 这是针对移动端的设置，和 PC 端没有关系，不会生效
// 设置布局视口的宽度等于视觉视口，此时就达到了理想视口。在实际开发中，都会这样做，也就是让页面在等于视觉视口的布局视口中进行布局，就不会再缩小页面来 适应屏幕大小了

1
2
3

1. width：布局视口的宽度，属性值是正整数或者 device-wdith。
2. height：布局视口的高度，属性值是正整数或者 device-height。目前还未被任何浏览器使用。
3. user-scalabe：用户是否可缩放页面，属性值是 yes 或者 no。有些浏览器会忽略此规则，可以结合使用 maximum-scale=1.0 和 minimum-scale=1.0 来实现。
4. initial-scale：页面初始缩放比例，属性值是 0.0 到 10.0 之间的正数。
5. maximum-scale：页面最大缩放比例，属性值是 0.0 到 10.0 之间的正数。
6. minimum-scale：页面最小缩放比例，属性值是 0.0 到 10.0 之间的正数。

真机查看：

1. 首先需要确保手机和电脑连接的是同一局域网。
2. 通过本地服务器打开想要查看的页面。
3. 通过 ipconfig 查询 IP 地址，替换掉页面地址中的域名。
4. 关闭电脑防火墙。
5. 在移动设备的浏览器中访问相应的网址即可查看。