怎么区分是移动端还是pc端？

navigator.userAgent

var u = navigator.userAgent
// 如果 u 包含 /AppleWebKit.*Mobile/ 则为手机端
// 如果包含iPad 则为iPad，不算做手机端
// 如果为手机端应该跳转h5对应的页面

苹果手机为： Mozilla/5.0 (iPhone; CPU iPhone OS 15_0_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 1qianbao-ios-7.7.6 webp webpscheme

google电脑模拟手机端： 1)Iphone 'Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1'

2）安卓：'Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Mobile Safari/537.36'

CSS样式兼容

一张背景图片由多个小图片组成，需要适配位置（比如一张大卡的背景）

一般的做法： 不是让UI给一个整张大图片作为背景图片，而应该是让UI给大图片里面的每个小图片，自己安到对应的位置；如果大卡上面和中间分别有张小图，则使用父元素的子元素给每个小图背景。

原因： 正常PC端直接一张背景大图搞定，但是移动端因为大图在没个手机机型的位置不一样，机型的字体不一样，小图会错位；所以需要一个个小图分别做背景图片

安卓和ios字体大小在手机屏幕上显示的不一样，安卓机型字体有的很大，有的比较正常，有时候需要根据ios和安卓分开写样式。