移动web开发

移动web开发现状

浏览器问题

UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，其他杂牌浏览器
    国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自助研发的内核，就像国内的手机操作系统都是基于Android修改的

设备屏幕问题

   大家都知道移动端设备屏幕尺寸非常多，碎片化严重。
   尤其是Android，你会听到很多种分辨率：480x800, 480x854, 540x960, 720x1280, 1080x1920，而且还有传说中的2K,4k屏。
   近年来iPhone的碎片化也加剧了：640x960, 640x1136, 750x1334, 1242x2208。

使用技术问题

移动web开发指的是需要适配移动设备的页面开发
移动web和桌面web没有本质的区别都使用css、html与js

主流设备尺寸

设备	尺寸(英寸)	开发尺寸(px)	物理像素比(dpr)
iphone3G	3.5	320*480	1.0
iphone4/4s	3.5	320*480	2.0
iphone5/5s/5c	4.0	320*568	2.0
HTC One M8	4.5	360*640	3.0
iphone6	4.7	375*667	2.0
Nexus 4	4.7	384*640	2.0
Nexus 5x	5.2	411*731	2.6
iphone6 Plus	5.5	414*736	3.0
Samsung Galaxy Note 4	5.7	480*853	3.0
Sony Xperia Z Ultra	6.4	540*960	2.0
Nexus 7 ('12)	7.0	600*960	1.3
iPad Mini	7.9	768*1024	1.0

注：以上数据均参考 https://material.io/devices/ ,一个设备尺寸统计网站。
注：作为前端开发不建议大家去纠结dp,dpi,pt,ppi等单位,因为它们有复杂的转换关系。

流式布局

• 流式布局,就是百分比布局,也称非固定像素布局。
• 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
• 这样的布局方式,是移动web开发使用的最常用布局方式。

伸缩布局

• CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。
• Flexbox布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。

视口概念

• 这是一个虚拟的区域，用来承载网页的区域，在浏览器可视窗口和网页之间。
• 有一些设备viewport的默认宽度是980px,网页内容显示在里面，为了能在320px屏幕内显示，会自动缩放。

在移动端有特殊的功能：可以设置宽度和高度，可以设置缩放比例，控制缩放的比例，控制用户是否可以自行缩放。

视口属性详解

属性	解释
width	宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale	初始缩放比，大于0的数字
maximum-scale	最大缩放比，大于0的数字
minimum-scale	最小缩放比，大于0的数字
user-scalable	用户是否可以缩放，yes或no（1或0）

视口的具体应用

• 适配有三点事情需要去做：
  • 页面的宽度和设备样宽
  • 默认的缩放比例是1.0
  • 不允许用户去缩放页面
• 标准的viewport设置：
  • 视口宽度和设备保持一致
  • 视口的默认缩放比例1.0
  • 不允许用户自行缩放
  • 最大允许的缩放比例1.0
  • 最小允许的缩放比例1.0

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

二倍图

淘宝非标准化视口设置

iphone5:

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

iphone6 plus

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

移动端设备屏幕清晰度

• 物理像素点指的是屏幕显示的最小颗，是物理真实存在的。
• 所谓Retina是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。
• 而一个px的绝对（在开发中认为是绝对）长度能显示的物理像素点的个数，称为物理像素比，屏幕像素比。

二倍图的使用

在标准的viewport设置中，使用二倍图来提高图片质量，解决在高清设备模糊问题。

    .box{
        /*原始图片100*100px*/
        background-size: 50px 50px;
    }
    img{
        /*原始图片100*100px*/
        width: 50px;
        height: 50px;
    }