H5和PC端开发差异对比

移动端开发现状

• 移动web 开发指的是需要适配移动设备的网页开发
• 移动web开发与pc端web开发没有本质的区别，使用的还是HTML/CSS/JavaScript的技术

移动端与pc端 web开发的区别

1、浏览器不同

移动端的浏览器与pc端不同

谷歌浏览器 苹果浏览器、 UC浏览器 QQ浏览器  百度手机浏览器  360安全浏览器  搜狗浏览器  猎豹浏览器等
国内的手机浏览器都是根据webkit内核修改过来的，国内没有自主研发的内核，国内的操作系统也是基于Android系统修改的。

因此在移动端，css3属性只需要加webkit前缀即可。

2、屏幕尺寸

移动端设备尺寸不一样(尺寸非常多，碎片化很严重)

Android： 320*480 480*800  540*960 720*1280 1080*1920 2k屏 4k屏
iphpne：  640*960 640*1136 750*1334 1242*2208

3、布局方式

移动端的特点

• 手机端的兼容性问题比PC端小很多，因为手机端的浏览器版本比较新（对H5的支持比较好）
• 手机端屏幕比较小，能够放的内容比较少。

问题：布局的时候怎么解决屏幕大小不一致的问题？

• PC端，固定版心，让所有分辨率的电脑的版心都是一样的，比如京东
• 移动端：移动端无法设置版心，因为移动端的设备屏幕本身就小，设置版心不合适。因此移动端大多会采用流式布局（百分比布局）

流式布局，也叫百分比布局，是移动端开发中经常使用的布局方式之一。

流式布局的特征：

• 宽度自适应，高度固定，并不是百分百还原设计图

流式布局无法做到所有设备都非常逼真的还原设计图，有些设备显示效果不是特别的好看。但是流式布局是移动端非常常用的一种布局方式，比较简单，需要掌握（携程、京东)

移动端调试问题

1. 模拟器调试
2. 真机调试：使用手机进行访问。

手机设备五花八门，屏幕尺寸都大不一样，尤其是安卓端，给我们的页面预览带来了一些麻烦。在实际工作中，作为开发者不可能有足够的设备让我们去测试（除了测试部门 ），即便有，效率也特别的低，因此开发者一般都是通过浏览器的手机模拟器来模拟不同的设备。