《一》移动端基础

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

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. 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. 在移动设备的浏览器中访问相应的网址即可查看。