掌握PC端和移动端差异，避免需求设计踩坑

本文转载自微信公众号「产品的掌握技术小课」，作者小课lemon。端和端差转载本文请联系产品的移动异避技术小课公众号。

对于同一个网站，免需目前大部分公司都是求设采用2套不同的设计和不同的代码来维护，原因就是计踩PC端和移动端有一定的差异。

下面从几个比较核心的掌握角度，阐述下PC端网页和移动端网页产品设计时的端和端差区别和注意点。

全文2000多字，移动异避阅读大概需要5分钟～

目录

1、免需设备不同

2、求设网络环境不同

3、计踩交互事件不同

4、掌握移动端的端和端差场景更多

一、设备不同

PC端网页运行在电脑端浏览器，移动异避而移动端网页运行在手机端浏览器。

1、屏幕大小不同

PC端的屏幕比较大，视觉范围比较大，可设计的地方很多，容错性比较强，有一个比较小的云服务器疏忽都不容易被发现。

移动端的屏幕比较小，操作局限性大，空间比较宝贵，容错性低，只要界面有一个个的瑕疵，很容易被发现，所以要求更高。

因屏幕大小不同，pc端和移动端的设计也是不一样的。

pc端一般会采用固定布局，因为它的屏幕大内容多，一般会设计一个最小宽度，如果屏幕过小，会出现滚动条。

移动端一般会采用响应式布局，随着屏幕大小的变化，界面的字体大小、图片大小、元素的布局都会发生相应的改变。

2、兼容性不同

PC端和移动端的操作系统不一样，源码库浏览器内核也有一定的区别。

不同的浏览器，对一些样式的支持不同，比如同一个样式属性，在A浏览器支持，在B浏览器不支持。所以兼容性是需要面临的问题。

PC端的兼容性只受windows和mac操作系统和固定的几个浏览器影响，

但是移动端还会被不同的手机厂商所影响，因为不同的手机厂商，手机内嵌的浏览器不一样，所以移动端需要解决的兼容性问题更多。

产品在提需求时，可以关注下这个产品的目标用户是哪些，目标用户使用的主流浏览器(pc端)或者主流机型(移动端)有哪些，

在写需求时建议写明需要兼容哪些机型(移动端)，哪些浏览器(pc端)，在需求验收时做好兼容性的亿华云计算功能验收。

3、性能要求不同

我们知道，相对来说，电脑内存比手机内存要大很多，cpu的性能也比移动端好。所以移动端对网页的性能要求更高。

你每访问一个网页，这个网页都会从服务端请求下载到你的设备上渲染出来，

因为手机内存有限，如果网页运行时需要下载大量图片，并且需要执行一些耗时算法、动画，可能会比较占用内存和cpu，会导致动画卡顿、交互卡顿。

所以一般移动端网页需要做的性能优化更多，比如减小资源体积、擅用缓存。

二、网络环境不同

PC端连接的网络更加稳定，移动端由于受不同区域信号影响，可能会出现弱网或者断网的情况。

为了能实现更好的用户体验，在产品功能设计时，需要注意弱网和断网的场景。

1、移动端弱网适配

我们知道，图片是网页资源里面比较大的，加载是比较慢的。

因为移动端网络不稳定，对于加载资源比较大的场景，建议给用户一个进度条的提示，给用户一个反馈。

当出现网络比较弱的情况下，一般要给用户提示“网络不给力，请稍后重试”的用语，让用户有个心理预期。

2、移动端断网适配

html5有一项技术叫离线存储。如果网页启用了离线存储，当用户访问网页时，浏览器会把下载的资源和数据进行离线存储，当网络中断时，浏览器会把离线存储的资源渲染出原来的网页。

如果你的目标用户处于弱网或者容易断网的场景比较多，比如东南亚地区的用户，建议使用这种断网的适配。

三、交互事件不同

pc端一般是使用鼠标或者触摸键盘来和界面交互，移动端一般通过手指来操作。

pc端和移动端的交互事件还是有很多不一样的地方。

1、点击事件

2者都有点击事件。但是移动端的点击事件实际是延迟了300ms的，细心的同学可能会遇到移动端页面点击一个按钮有些延迟才触发。

所以移动端一般会采用触摸结束事件来触发点击(touchend)，这样就不会有延迟。

2、鼠标相关事件

pc端网页才有鼠标相关事件，所以悬浮事件、右键菜单事件、双击事件、拖拽事件、移动端是没有的。

3、触摸相关事件

因为移动端是用手指来跟界面交互的，所以跟触摸相关的事件，移动端才有。包括手指触摸事件、手指抬起事件、放大缩小事件等。

四、移动端的场景更多

1、横屏竖屏

移动端有旋转事件，当手机是横屏或者竖屏都能监测得到。

因为横屏和竖屏的手机宽度高度正好反过来，差距比较大。

如果只按照竖屏设计，当用户旋转到横屏时，可能会使得布局混乱。

一般采用2种方法适配：

一是禁用旋转。h5可以禁止用户把手机旋转时，屏幕也跟着旋转。

二是适配2种模式。横屏和竖屏采用2种不同的布局模式。

2、字体缩放

因为移动端的用户经常会在手机设置字体大小，比如老年用户，他会把字体调的特别大，导致布局发生了错乱，一种常用的解决方法是，h5设置禁止字体缩放。

3、暗黑模式适配

背景：

1)ios13 版本在2019年3月加入了暗黑模式

2)android 10及更高版本中提供了深色主题背景

3)mac os10.14 加入了暗黑模式

4)window10 也加入了暗黑模式

可见越来越多的新版本设备加入了暗黑模式。

优点：

1)可减少设备耗电量。

2)在夜间使用暗黑模式，减弱光对眼睛的射入，保护眼睛。 

在暗黑模式下，系统对所有的窗口、菜单、控件都使用了较暗的色调，我们的h5主色调，应该随着设备模式的切换而自适应色调，呈现出一个比较协调的视觉效果。

最新评论