移動(dòng)web開發(fā)現(xiàn)狀
瀏覽器問題
UC瀏覽器，QQ瀏覽器，歐朋瀏覽器，百度手機(jī)瀏覽器，360安全瀏覽器，谷歌瀏覽器，搜狗手機(jī)瀏覽器，獵豹瀏覽器，其他雜牌瀏覽器
國內(nèi)的UC和QQ，百度等手機(jī)瀏覽器都是根據(jù)Webkit修改過來的內(nèi)核，國內(nèi)尚無自助研發(fā)的內(nèi)核，就像國內(nèi)的手機(jī)操作系統(tǒng)都是基于Android修改的
設(shè)備屏幕問題
大家都知道移動(dòng)端設(shè)備屏幕尺寸非常多，碎片化嚴(yán)重。
尤其是Android，你會(huì)聽到很多種分辨率：480x800, 480x854, 540x960, 720x1280, 1080x1920，而且還有傳說中的2K,4k屏。
近年來iPhone的碎片化也加劇了：640x960, 640x1136, 750x1334, 1242x2208。
使用技術(shù)問題
移動(dòng)web開發(fā)指的是需要適配移動(dòng)設(shè)備的頁面開發(fā)
移動(dòng)web和桌面web沒有本質(zhì)的區(qū)別都使用css、html與js
主流設(shè)備尺寸
| 設(shè)備 | 尺寸(英寸) | 開發(fā)尺寸(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 |
注：以上數(shù)據(jù)均參考 https://material.io/devices/ ,一個(gè)設(shè)備尺寸統(tǒng)計(jì)網(wǎng)站。
注：作為前端開發(fā)不建議大家去糾結(jié)dp,dpi,pt,ppi等單位,因?yàn)樗鼈冇袕?fù)雜的轉(zhuǎn)換關(guān)系。
流式布局
- 流式布局,就是百分比布局,也稱非固定像素布局。
- 通過盒子的寬度設(shè)置成百分比來根據(jù)屏幕的寬度來進(jìn)行伸縮，不受固定像素的限制，內(nèi)容向兩側(cè)填充。
- 這樣的布局方式,是移動(dòng)web開發(fā)使用的最常用布局方式。
伸縮布局
- CSS3引入了一種新的布局模式——Flexbox布局，即伸縮布局盒模型（Flexible Box），用來提供一個(gè)更加有效的方式制定、調(diào)整和分布一個(gè)容器里項(xiàng)目布局，即使它們的大小是未知或者動(dòng)態(tài)的，這里簡稱為Flex。
- Flexbox布局常用于設(shè)計(jì)比較復(fù)雜的頁面，可以輕松的實(shí)現(xiàn)屏幕和瀏覽器窗口大小發(fā)生變化時(shí)保持元素的相對(duì)位置和大小不變，同時(shí)減少了依賴于浮動(dòng)布局實(shí)現(xiàn)元素位置的定義以及重置元素的大小。
視口概念
- 這是一個(gè)虛擬的區(qū)域，用來承載網(wǎng)頁的區(qū)域，在瀏覽器可視窗口和網(wǎng)頁之間。
- 有一些設(shè)備viewport的默認(rèn)寬度是980px,網(wǎng)頁內(nèi)容顯示在里面，為了能在320px屏幕內(nèi)顯示，會(huì)自動(dòng)縮放。
在移動(dòng)端有特殊的功能：可以設(shè)置寬度和高度，可以設(shè)置縮放比例，控制縮放的比例，控制用戶是否可以自行縮放。
視口屬性詳解
| 屬性 | 解釋 |
|---|---|
| width | 寬度設(shè)置的是viewport寬度，可以設(shè)置device-width特殊值 |
| initial-scale | 初始縮放比，大于0的數(shù)字 |
| maximum-scale | 最大縮放比，大于0的數(shù)字 |
| minimum-scale | 最小縮放比，大于0的數(shù)字 |
| user-scalable | 用戶是否可以縮放，yes或no（1或0） |
視口的具體應(yīng)用
- 適配有三點(diǎn)事情需要去做：
- 頁面的寬度和設(shè)備樣寬
- 默認(rèn)的縮放比例是1.0
- 不允許用戶去縮放頁面
- 標(biāo)準(zhǔn)的viewport設(shè)置：
- 視口寬度和設(shè)備保持一致
- 視口的默認(rèn)縮放比例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">
二倍圖
淘寶非標(biāo)準(zhǔn)化視口設(shè)置
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">
移動(dòng)端設(shè)備屏幕清晰度
- 物理像素點(diǎn)指的是屏幕顯示的最小顆，是物理真實(shí)存在的。
- 所謂Retina是一種顯示技術(shù)，可以將把更多的物理像素點(diǎn)壓縮至一塊屏幕里，從而達(dá)到更高的分辨率并提高屏幕顯示的細(xì)膩程度。
- 而一個(gè)px的絕對(duì)（在開發(fā)中認(rèn)為是絕對(duì)）長度能顯示的物理像素點(diǎn)的個(gè)數(shù)，稱為物理像素比，屏幕像素比。
二倍圖的使用
在標(biāo)準(zhǔn)的viewport設(shè)置中，使用二倍圖來提高圖片質(zhì)量，解決在高清設(shè)備模糊問題。
.box{
/*原始圖片100*100px*/
background-size: 50px 50px;
}
img{
/*原始圖片100*100px*/
width: 50px;
height: 50px;
}
