【移动端网页布局】移动端网页布局基础概念 ① ( 移动端浏览器 | 移动端屏幕分辨率 | 移动端网页调试方法 )

一、移动端浏览器

移动端浏览器 比 PC 端浏览器发展要晚 , 使用的技术比较新 , 对 HTML5 + CSS3 支持较好 , 常见的浏览器如下 :

• UC / QQ / Opera / Chrom / 360 / 百度 / 搜狗 / 猎豹

国内的浏览器 基本都是 根据 Webkit 内核进行修改而来的 , 目前没有自主研发的内核 , 因此 移动端开发适配比较简单 , 兼容主流的浏览器 , 即兼容 Webkit 内核浏览器即可 ;

二、移动端屏幕分辨率

移动设备的尺寸类型非常多 , Android / iOS 手机分辨率种类很多 , 参考

• Android 屏幕适配 专栏 ;
• 【Android 屏幕适配】屏幕适配基础概念 ① ( Android 与 iOS 屏幕宽高比种类 | 屏幕像素密度 DPI ) 博客 ;

前端开发时 , 不需要关注上述 屏幕像素密度 dpi , 密度无关像素 dp , 只需要关注 像素尺寸 px 即可 ;

三、移动端网页调试方法

使用 Chrom DevTools 谷歌浏览器开发工具 模拟手机调试 ; 使用 360 极速浏览器也可以使用该开发工具 ;

进入浏览器 , 输入网址 , 按下 F12 进入调试模式 , 点击工具中的

按钮 , 可以 切换到手机模式 ;

切换成手机模式 , 样式如下 :

左侧的下拉菜单 , 可以选择手机型号 ;

如果没有找到满意的手机型号 , 可以点击 Edit 按钮 , 添加虚拟设备 ;

最右侧的

按钮 , 可以旋转手机的横竖屏 , 下面是横屏样式 :