把握PC端和移动端的差异，避免需求设计的陷阱。转载本文请联系产品技术班公众号。对于同一个网站，目前大多数公司使用两种不同的设计和不同的代码来维护它。原因是PC端和移动端存在一定的差异。下面从几个核心的角度，阐述PC端网页和移动端网页产品设计的区别和注意点。全文2000多字，阅读时间约5分钟~目录1.屏幕尺寸不同，兼容性不同，性能要求不同，网络环境不同终端侧场景较多，横屏，竖屏屏幕、字体缩放和深色模式适配1.不同的设备。PC端网页运行在电脑端浏览器上，而手机端网页运行在手机浏览器上。1.屏幕尺寸不同。PC端的屏幕比较大，可视范围比较大，设计的地方比较多，容错性比较强。一个比较小的疏忽是不容易被发现的。移动端屏幕比较小，操作限制大，空间比较宝贵，容错率低。只要接口有瑕疵，就很容易被发现，所以要求更高。由于屏幕尺寸的不同，PC端和移动端的设计也不同。pc端一般采用固定布局，因为它的屏幕较大，内容较多，一般会设计一个最小宽度。如果屏幕太小，会出现滚动条。移动端一般采用响应式布局。随着屏幕尺寸的变化，界面的字体大小、图片大小、元素布局都会随之变化。2、兼容性不同PC端和移动端的操作系统不同，浏览器内核也有一定差异。不同的浏览器对某些样式的支持不同。比如同一个style属性，A浏览器支持，B浏览器不支持。那么兼容性就是一个需要面对的问题。PC端的兼容性只受windows和mac操作系统以及固定的几个浏览器的影响，但是移动端也会受到不同手机厂商的影响，因为不同的手机厂商手机内嵌的浏览器不同，所以手机最后还有更多的兼容性问题需要解决。提出产品需求时，可以关注该产品的目标用户是谁，目标用户使用的主流浏览器（pc端）或主流机型（移动端）是什么，建议注明写需求类型时需要兼容哪些机器（手机端），哪些浏览器（pc端），需求验收时做好兼容功能验收。3、性能要求不同我们知道，相对来说，电脑内存要比手机内存大很多，CPU的性能也比手机端要好。因此，移动端对网页的性能要求更高。每次您访问网页时，该网页都会从服务器下载并呈现在您的设备上。因为手机内存有限，如果网页在运行时需要下载大量的图片，需要执行一些耗时的算法和动画，可能会占用更多的时间。内存和cpu会造成动画卡顿和交互卡顿。因此，一般的移动端网页需要做更多的性能优化，比如减少资源大小，利用好缓存等。2、网络环境不同PC端连接的网络更稳定。由于不同地区信号的影响，移动终端可能会出现网络弱或断网的情况。为了达到更好的用户体验，在设计产品功能时需要关注弱网、断网场景。1、移动端网络适配弱进度条提示图片在网页资源中比较大，加载比较慢。因为移动端网络不稳定，建议给用户一个进度条提示，针对加载资源比较多的场景给用户一个反馈。弱网提醒当网络比较弱的时候，一般需要用“网络不强，请稍后再试”这句话来提示用户，让用户有心理预期。2.有一种技术叫离线存储，用来适配html5在移动端断网的情况下。如果网页启用了离线存储，当用户访问网页时，浏览器会将下载的资源和数据离线存储。当网络中断时，浏览器会将离线存储的资源渲染到原网页。如果你的目标用户是弱网或者容易断网的用户，比如东南亚用户，建议使用这个断网适配。3、交互事件不同PC端一般使用鼠标或触摸键盘与界面进行交互，移动端一般使用手指操作。PC端和移动端的交互事件还是有很多区别的。1.点击事件和2都有点击事件。但是移动端的点击事件实际延迟了300ms。细心的同学可能会遇到在移动端页面点击按钮时触发延迟。所以移动端一般使用touch结束事件来触发点击（touchend），这样不会有延迟。2.鼠标相关事件pc端网页只有鼠标相关事件，所以没有悬停事件、右键菜单事件、双击事件、拖动事件、移动端事件。3、触摸相关事件因为移动端是通过手指与界面进行交互，所以只有移动端有触摸相关事件。包括手指触摸事件，手指抬起事件，放大缩小事件等。4.移动端场景较多1.横竖屏移动端有旋转事件，移动时可以监听手机处于横屏或竖屏。因为横屏和竖屏手机的宽高刚好相反，差距比较大。如果只按照竖屏设计，当用户旋转到横屏时，布局可能会乱七八糟。一般采用两种方式进行适配：一种是禁用旋转。h5可以防止用户旋转手机时屏幕旋转。二是适应两种模式。横向和纵向屏幕有2种不同的布局模式。2.字体缩放因为移动用户经常在手机上设置字体大小，比如老年用户，他们会将字体调整到特别大，导致布局混乱。一个常见的解决方案是在h5设置中禁用字体缩放。3.深色模式适配背景：1）ios13版本2019年3月加入深色模式2）Android10及以后版本提供深色主题背景3）macos10.14加入深色模式4）window10也加入了深色模式显示越来越多新版本设备加入了深色模式。优点：1）可以降低设备的功耗。2）夜间使用深色模式，减少进入眼睛的光线，保护眼睛。在深色模式下，系统对所有窗口、菜单和控件使用较暗的色调。我们的h5主色调应该随着设备模式的切换来适应基调，呈现出更加协调的视觉效果。
