本文转载自微信公众号「产品的技术小课」，作者小课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主色调，应该随着设备模式的切换而自适应色调，呈现出一个比较协调的视觉效果。
