一、移动端浏览器

移动端浏览器比 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 按钮 , 添加虚拟设备 ;

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

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

网页设计（一）——HTML基础概念
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入 ...
html读取媒体长度,用媒体查询media根据屏幕分辨率大小确定网页宽度
显示网页的终端屏幕分辨率大小不一,为了能使同一网页能在不同的终端中合适显示,CSS3 推出了媒体查询media.用媒体查询media能根据屏幕分辨率大小确定网页宽度,这主要在 CSS 文件中根据屏幕分 ...
计算机常用屏幕分辨率,pc端常用电脑屏幕（(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）...
PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸.12.1寸.1 ...
调试屏幕分辨率变化html页面变化,屏幕分辨率如何自动调整网页显示问题
对于初学者来说,屏幕分辨率就是一个陌生的词语,更别说如何操作了.小编今天就给初学者补习一下基础知识什么是电脑分辨率?如何进行电脑屏幕分辨率的调整?首先请各位电脑小白跟随学习啦小编认识下电脑分辨率. 确 ...
【移动端网页布局】移动端网页布局基础概念 ⑧ ( 移动端页面布局方案 | 单独制作的移动端页面 - 主流 | 响应式页面兼容移动端 - 开发难度较大 )
文章目录一.移动端页面布局方案 1.单独制作的移动端页面 2.响应式页面兼容移动端一.移动端页面布局方案移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , PC 端与移动端访问 ...
【移动端网页布局】移动端网页布局基础概念 ② ( 视口 | 布局视口 | 视觉视口 | 理想视口 )
文章目录一.视口 1.布局视口 ( 网页大小 | 网页大小 > 设备大小 ) 2.视觉视口 ( 设备大小 | 网页大小 > 设备大小 ) 3.理想视口 ( 网页大小 = 设备大小 ) 一 ...
移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例)
移动端WEB开发之响应式布局 1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: <!DOCTYPE html> & ...
flex 左右布局_移动端开发常用布局：前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
20.【移动端Web开发之响应式布局】
文章目录 [移动端Web开发之响应式布局]前端小抄(20) 一.响应式开发 1.1 响应式开发原理 1.2 响应式布局容器二.Bootstrap前端开发框架 2.1 Bootstrap简介 2.2 ...

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

文章目录

一、移动端浏览器

二、移动端屏幕分辨率

三、移动端网页调试方法

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

最新文章

热门文章