移动端基础知识（上）

---

一、移动端基础

1.浏览器现状

(1)PC端常见浏览器

360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、ie浏览器

(2)移动端常见浏览器

uc浏览器、QQ浏览器、欧朋浏览器、百度手机浏览器、360安全浏览器、谷歌浏览器、搜狗手机浏览器、猎豹浏览器、夸克浏览器以及其他杂牌浏览器

国内的UC和QQ，百度等手机浏览器都是根据webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。

总结：兼容移动端主流浏览器，处理webkit内核浏览器即可。

2.手机屏幕现状

• 移动端设备屏幕尺寸非常多，碎片化严重
• Android设备有多种分辨率：480×480，480×854，540×960，720×1280，1080×1920等，还有传说中的2k,4k屏
• 近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640×960，640×1136，750×1334，1242×2208等
• 作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是px。

3.常见移动端屏幕尺寸

注：以上数据均参考自https://material.io/devices/
作为前端开发，不建议大家纠结dp，dpi，pt，pp等单位

4.移动端调试方法

• chrome devtools（谷歌浏览器）的模拟手机调试
• 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
• 使用外网服务器，直接ip或域名访问

5.总结

• 移动端浏览器我们主要对webkit内核进行兼容
• 我们现在开发的移动端主要针对手机端开发
• 现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一
• 学会用谷歌浏览器模拟手机界面以及调试