1.既然是移動(dòng)端, 就一定要按照移動(dòng)端規(guī)范走, 直接使用 Chrome 瀏覽器進(jìn)行移動(dòng)端開(kāi)發(fā)測(cè)試
2.推薦固定寬度布局 核心代碼：width=750, 將width設(shè)定為設(shè)計(jì)稿寬度(重要 !)
<meta name="viewport" content="width=750,target-densitydpi=device-dpi,user-scalable=no" />
原理：根據(jù)設(shè)計(jì)的寬度，在viewport定死頁(yè)面的寬度，這樣可以全部用設(shè)計(jì)的像素寬高來(lái)進(jìn)行定位操作(pc端頁(yè)面的切圖方式)。同時(shí)，用viewport的屬性讓頁(yè)面寬度占滿全屏。即: 按照設(shè)計(jì)稿進(jìn)行 1:1 頁(yè)面重構(gòu)后, 頁(yè)面將自動(dòng)進(jìn)行縮放, 不用再考慮適配問(wèn)題
缺點(diǎn): 當(dāng)設(shè)計(jì)稿的寬度很大, 但是移動(dòng)端的屏幕較小時(shí), 有的按鈕可能會(huì)小于可視寬度, 點(diǎn)擊時(shí)不一定能夠一次點(diǎn)擊成功,導(dǎo)致用戶體驗(yàn)不好
解決方法: 給嬌小的圖標(biāo)按鈕添加一個(gè)外層 div盒子將其寬高放大, 將事件綁定在這個(gè)外層的div盒子上
3.盡量使用 padding 和 margin 布局,
- 切圖要注意,多用盒子嵌套盒子來(lái)完成頁(yè)面布局,不要用太多浮動(dòng)和定位(尤其是定位,很容易出現(xiàn)問(wèn)題)
- 盒子的高度不要定死，盡量使用標(biāo)簽和padding將其撐開(kāi)
-
出現(xiàn)了圖片下方還要寫文字的，一律使用div盒子包含img的格式。將大盒子撐開(kāi)，盡量不要使用margin和定位
<div class="box-pic">
<div class="btn-box">
<div class="J_open_red">拆<span>拆</span>拆</div>
</div>
</div>
4.遮罩層（半透明背景）是單獨(dú)的一層,里面不要添加任何東西,使用絕對(duì)定位和層級(jí)z-index來(lái)完成頁(yè)面的重合部分。
5.需求方嫌棄頁(yè)面第一次打開(kāi)時(shí)需要授權(quán),然后頁(yè)面加載刷新兩次的問(wèn)題.
解決方法: 給頁(yè)面中的 <body>標(biāo)簽添加一個(gè)display:none屬性,然后,在微信授權(quán)成功后刪除此屬性(雖然時(shí)間沒(méi)有什么變化...)
6.移動(dòng)端的頁(yè)面切換經(jīng)常需要各個(gè)頁(yè)面進(jìn)行參數(shù)傳遞
HTML 5 Web 存儲(chǔ)
方法1:
sessionStorage 方法
sessionStorage 方法針對(duì)一個(gè) session 進(jìn)行數(shù)據(jù)存儲(chǔ)。當(dāng)用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)會(huì)被刪除。
如何創(chuàng)建并訪問(wèn)一個(gè) sessionStorage：
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>
方法2:
localStorage 方法
localStorage 方法存儲(chǔ)的數(shù)據(jù)沒(méi)有時(shí)間限制。第二天、第二周或下一年之后，數(shù)據(jù)依然可用。
如何創(chuàng)建和訪問(wèn) localStorage：
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
7.IOS 和 Android 判斷
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
if(isAndroid == true){
document.getElementById("p1").innerHTML="安卓";
}else{
document.getElementById("p1").innerHTML="IOS";
}