移动端开发的几点建议

更多文章

1. 页面适配

这一点不能算是建议，应该说是解决方案。

最近查了好多关于移动端适配的资料，把人都看懵了，收获了以下名词

CSS像素、物理像素、逻辑像素、设备像素比、PPI、DPI、DPR、DIP、Viewport

说实话，我一点都不想了解这些名词到底有着什么样的解释，只想知道怎么让开发的页面能适配不同的移动端设备。简单点说，我想知道怎么获取设备的真实开发尺寸（根据这几天查资料所得，这个概念叫逻辑像素）。

例如 iphone 6，它的分辨率是 750 x 1334，真实开发尺寸是 375 x 667（逻辑像素），打开 chrome 控制台，切换 device toolbar，选择 iphone 6 设备就能看到。

苹果设备大多都能查到它的开发尺寸是多少。但安卓设备不是，没有这种条件，所以要靠其他手段了。

根据查资料所得，目前有两种方法可以获得移动设备的真实开发尺寸。

第一种方法：设备像素比

真实开发尺寸 = 分辨率 / 设备像素比

通过 window.devicePixelRatio 可以获取设备像素比，例如 iphone 6 的设备像素比是 2，即分辨率 / 2 = 真实开发尺寸，750 x 1334 / 2 = 375 x 667。移动设备的分辨率随处可查，看发行参数就知道了，然后再通过浏览器获取设备像素比，从而得知设备真实开发尺寸。

第二种方法

这种方法不需要知道设备分辨率，也不需要知道设备像素比，简单粗暴。

在页面建立一个刚好铺满全屏的 div 元素，然后获取它的宽高，这个宽高就是该设备的真实开发尺寸。

.test-div {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background: red;
}

document.querySelector('test-div').clientWidth // 宽
document.querySelector('test-div').clientHeight // 高

刚好我手上有一个华为 m5 平板和华为 m5 pro 平板，大小分别为 10.1 寸和 10.8 寸，分辨率为 1920 x 1200，2560 x 1600。获取到它们的真实开发尺寸分别为 960 x 600 1024 x 640，根据分辨率和真实开发尺寸还能得知两个设备的设备像素比分别为 2 和 2.5。
如图所示（华为 m5）

在这里插入图片描述

为了证明推断是正确的，我拿了一个专门在 m5 pro 上使用的 app 放在 chrome 上运行（模拟该设备的开发尺寸），完美适配。

在这里插入图片描述

另外提一下，为手机开发的网站放在其他手机上一般都能适配，但是放在平板上很难适配，毕竟屏幕大小差太多了，反之亦然。没有网站能完美适配所有的端，当然，简单的页面还是可以的，不过得写一堆 @media screen。

2. 相对长度计量单位

在 css 中有很多相对长度，其中常用的有 em rem vw vh，在小程序上有 rpx。

在此，我建议你使用 vw 和 vh 作为移动端开发的相对单位，包括字体大小、元素宽高、距离等等。

理由如下：

vw vh 换算方便

1vw = 屏幕 1% 的宽度
1vh = 屏幕 1% 的高度

兼容性好

无论是在网页还是在小程序，只要支持 css 就能完美兼容。

PS：在页面上有 input 输入框的时候，不要使用 vh 作为计量单位，因为软键盘弹出时会压缩页面高度，如果用 vh 作为计量单位，会导致页面严重变形，此时用 vw 就没有这个风险了。

固定高度使用 px

像边框或者分隔线等“固定”高度的，可以使用 px。

3. 栅格化布局

如果开发的 app 只是应用在手机上，适配一般不会有什么问题，因为屏幕大小不会相差很多。但是放到平板上就会有问题，如果计量单位使用的是相对长度，各个元素相对于手机都会变大，导致不美观。

在这种情况下，我们可以使用栅格化布局。例如在手机上采取两列布局，在平板上采取三列布局。另外还要用 @media 根据分辨率来调整元素的大小、字体的大小等等。

PS：如果一个 app 要应用在手机和平板上，相对计量单位建议使用 rem，这样在手机和平板上可以设置两个不同的根元素字体大小。

推荐阅读

4. 尽量使用移动端专用的 UI 组件库

PC 端的 UI 组件库在移动端上会有很多样式 BUG，如非必要，不要使用。

5. 设备状态栏

如果 app 在移动设备上不需要全屏展示，那么在 chrome 上模拟设备大小时要减去设备状态栏的高度。

当然，这一般都不会有什么问题，只是为了多加一条建议。

本文链接：https://blog.csdn.net/q411020382/article/details/103521978

智能推荐

Viewport视口在移动端viewport视口就是浏览器显示页面内容的屏幕区域。在viewport中有两种视口，分别表示为， visual viewport（可视视口）和layout viewport（布局视口）。 visual viewport 固定大小跟屏幕大小相同，在上面，而layout viewport 可改变大小，在下面。Layout viewport默认大小为980像素，可通过do...

移动端开发

移动端开发知识点 pc端软件和移动端app pc端软件是什么，有哪些应用。常见的例子，比如360杀毒，photoShop， Visual Studio Code等等移动端app是什么，有哪些应用。常见的例子，比如手机微信，手机qq，手机浏览器，美颜相机等等 PC端与移动端的区别第一： PC考虑的是浏览器的兼容性，移动端考虑的是手机兼容性，目前不管是android还是ios，一般浏览器使用的...

Linux内核之进程调度3:进程调度

1. 吞吐率和响应吞吐：单位时间内做的有用功；响应：低延迟。吞吐追求的整个系统CPU做有用功，响应追求的是某个特定任务的延迟低； 1GHZ的CPU切换线程保存恢复现场约几个微妙级别，看似消耗不了太多时间，但是由于系统的局部性原理，会保存当前线程数据的缓存，切换线程会打乱局部性引起cache miss，而CPU访问cache速度远大于内存访问，这样综合看来上下文切换花销还是很大的。无用功占用较...

restful+ci框架实践

restful架构：是就是目前最流行的一种互联网软件架构。它结构清晰、符合标准、易于理解、扩展方便，所以正得到越来越多网站的采用。具体理论请看我上一篇写的restful理论。本篇主要记录下关于restful的实践。 restful实践：工具：这次在ci框架+restful 主要文件：在控制器中添加控制器类：Restful.php。在头部包含REST_Controller.php文件并继承...

Configuration, ConfigurationProperties和EnableConfigurationProperties用法

最近刚刚解决了个错误，突然又发现这个类在spring容器中找不到，于是我就加一个 @Component的注解，哈哈直接启动成功，那我如果吧这个注解去掉，加上一个@Configuration的注解呢，哈哈还是可以的，毕竟里面已经有这个@Component的注解了。所以我就整理下Configuration，ConfigurationProperties，EnableConfigurationProp...