【第三部分 | 移动端开发】1：移动端基础概要

小咪咪 2023-09-23 15:47 71阅读 0赞

**目录**

| 概述

| 手机端调试

| 视口 ViewPort

三种视口

meta标签 设置视口

代码适配PE端的要点

| 二倍图

物理像素和物理像素比

利用二倍图解决图片在PE端默认放大失真

背景缩放 background-size

| 移动端的开发选择

| 移动端的相关开发注意点

--------------------

### | 概述 ###

![0edfb14ad6ef451d8fe1d8f143922c62.png][]

--------------------

### | 手机端调试 ###

打开谷歌浏览器，点击F12，打开手机调试页面

![e434089e186b4560b6e8c68652378d6b.png][]

在该界面下，输入的网址，都会展示手机端对应的网址（一个网址可以对应PC端、PE端；也可以PC、PE共用样式）

![d3b050a9020b4fcb96029b89f7d274ae.png][]

相关调试的步骤和方法，和PC端一致。

--------------------

### | 视口 ViewPort ###

学习目标：了解PE端如何显示我们的网页。

#### 三种视口 ####

**布局视口**

![f0ac4f2ec1f244ad8a69dcccb71452bc.png][]

**视觉视口**

![9ebebc56d5ea45bbb4ddeecfa72c84d2.png][]

**理想视口**

![f4899b52203b406f98fc8f8550c252cd.png][]

#### meta标签 设置视口 ####

![68d286b8c56c4f55bc7fb0542e4f5ec6.png][]

一般都写成下列代码：

--------------------

#### **代码适配PE端的要点** ####

**重点： 今后写网页代码的时候，同时进行PC和PE端的调试。 注意规定好样式！有些样式不声明，在PC端是没影响的，但是PE端会崩**

--------------------

### **| 二倍图** ###

#### **物理像素和物理像素比** ####

物理像素：设备的分辨率，即设备中的像素点。

物理像素比：

在PC端：1px就是PC上的一个像素点

在PE端：1px不一定就是PE上的一个像素点。**若开发中的1px对应PE端的npx像素点，则我们称 n 为物理像素比/屏幕像素比**

实际在PE设备上显示的像素 = px \* 物理像素比

下面给出的是 一些设备的物理像素比

![f16c43c39a1a414ebf832efd9059fd7a.png][]

--------------------

#### 利用二倍图解决图片在PE端默认放大失真 ####

若PE端物理像素比为2，则50\*50的图片放到手机端，会被放大为100x100，失真！

我们可以直接使用100x100，然后放进50x50的盒子，再在PE端打开的时候自动变为100x100，这样就不会失真了！

![ec1d48dcd38e412aab0885ace1745e28.png][]

--------------------

#### 背景缩放 background-size ####

![d017e51cc5004ca4baa06d6918da8200.png][]

代码示例

![b3c7ffc999034078b452036efb951e14.png][]

--------------------

### | 移动端的开发选择 ###

方法一：重新写一套页面（推荐）

方法二：响应式页面兼容移动端（需要调试很多适配性问题！）

--------------------

### | 移动端的相关开发注意点 ###

*  PE端专有的CSS初始化。（文件放在相关资源文件夹中，以后直接引用就OK）
 *  PE端开发可以放心使用CSS3的盒子模型 box-sizing: border-box
 *  其它的移动端相关开发注意点：

/*CSS3盒子模型*/
     box-sizing: border-box;
     -webkit-box-sizing: border-box;
    
     /*点击高亮我们需要清除清除 设置为transparent 完成透明*/
     -webkit-tap-highlight-color: transparent;
    
     /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
     -webkit-appearance: none;
    
     /*禁用长按页面时的弹出菜单*/
     img,a { -webkit-touch-callout: none; }

[0edfb14ad6ef451d8fe1d8f143922c62.png]: https://img-blog.csdnimg.cn/0edfb14ad6ef451d8fe1d8f143922c62.png
[e434089e186b4560b6e8c68652378d6b.png]: https://img-blog.csdnimg.cn/e434089e186b4560b6e8c68652378d6b.png
[d3b050a9020b4fcb96029b89f7d274ae.png]: https://img-blog.csdnimg.cn/d3b050a9020b4fcb96029b89f7d274ae.png
[f0ac4f2ec1f244ad8a69dcccb71452bc.png]: https://img-blog.csdnimg.cn/f0ac4f2ec1f244ad8a69dcccb71452bc.png
[9ebebc56d5ea45bbb4ddeecfa72c84d2.png]: https://img-blog.csdnimg.cn/9ebebc56d5ea45bbb4ddeecfa72c84d2.png
[f4899b52203b406f98fc8f8550c252cd.png]: https://img-blog.csdnimg.cn/f4899b52203b406f98fc8f8550c252cd.png
[68d286b8c56c4f55bc7fb0542e4f5ec6.png]: https://img-blog.csdnimg.cn/68d286b8c56c4f55bc7fb0542e4f5ec6.png
[f16c43c39a1a414ebf832efd9059fd7a.png]: https://img-blog.csdnimg.cn/f16c43c39a1a414ebf832efd9059fd7a.png
[ec1d48dcd38e412aab0885ace1745e28.png]: https://img-blog.csdnimg.cn/ec1d48dcd38e412aab0885ace1745e28.png
[d017e51cc5004ca4baa06d6918da8200.png]: https://img-blog.csdnimg.cn/d017e51cc5004ca4baa06d6918da8200.png
[b3c7ffc999034078b452036efb951e14.png]: https://img-blog.csdnimg.cn/b3c7ffc999034078b452036efb951e14.png