1. 無(wú)法滾動(dòng)板乙，在混合APP中這個(gè)是最常見(jiàn)最容易發(fā)生的問(wèn)題。
問(wèn)題描述：html、body有設(shè)置height：100%拴事，會(huì)導(dǎo)致在APP中不能滾動(dòng) 解決一：去掉html、body的height設(shè)置圣蝎，同時(shí)把不需要滾動(dòng)的部位設(shè)置固定定位（這樣看起來(lái)就像在當(dāng)前容器中滾動(dòng)而不是在整個(gè)html中滾動(dòng)刃宵。） 解決二：使用iscroll 或者 vue-scroller 等第三方j(luò)s模擬滾動(dòng)的npm 插件。目前自己是使用方案一實(shí)現(xiàn)的徘公。
2. 固定定位position: fixed 失效
問(wèn)題描述：我們都知道h5頁(yè)面中的固定定位是相對(duì)于整個(gè)window窗口牲证，但中混合頁(yè)面中，尤其在iOS系統(tǒng)的固定定位抖動(dòng)的情況关面，或者會(huì)隨頁(yè)面滾動(dòng)坦袍，或者沒(méi)有實(shí)現(xiàn)預(yù)期的層次關(guān)系。
解決： 用position: absolute 布局代替固定定位等太。
3. 用vue做前端頁(yè)面 解決IOS返回白屏問(wèn)題**
問(wèn)題描述：進(jìn)入A頁(yè)面——>B頁(yè)面——>ios自帶的返回——>白屏出現(xiàn)——>手動(dòng)點(diǎn)擊白屏處——>問(wèn)題解決
原因：在ios機(jī)器上使用webview開(kāi)發(fā)Vue項(xiàng)目時(shí)候捂齐，go history(-1)， 無(wú)法將body的高度拉掉缩抡，使得遮住奠宜，觸發(fā)輕點(diǎn)擊，方可消除遮罩
解決：html瞻想，body都是100%压真，#app撐起了父元素的高度，但是瀏覽器默認(rèn)的滾動(dòng)scroll并不是#app蘑险，而是body,某些元素滴肿，造成返回history 后，無(wú)法復(fù)原（ios 的鍋）佃迄，為此泼差，我們將#app 進(jìn)行了絕對(duì)定位竿音，并讓它重新成為 scroll 的對(duì)象，從而解決問(wèn)題
具體實(shí)現(xiàn)：
html, body { width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
}
#app {
width: 100%;
height: 100%;
background: #fff;
overflow: scroll;
-webkit-overflow-scrolling: touch;
position: absolute;
left:0;
top:0;
}
4. 訪問(wèn)圖片出現(xiàn)403(服務(wù)器端資源不可用)的解決辦法
參考網(wǎng)站：https://blog.csdn.net/tiantang_1986/article/details/83748782
5. 居中對(duì)齊拴驮，ios\Android 不能同時(shí)居中垂直對(duì)齊
用自己手機(jī)一看是居中的春瞬，測(cè)試給提bug沒(méi)有垂直居中？
解決：給父元素使用flex布局垂直居中套啤，這還不夠宽气，還是會(huì)有不兼容的情況。這時(shí)需要把父潜沦、子元素的相關(guān)的寬高尺寸都X2, 然后在父元素上使用transform:scale(0.5)萄涯。整個(gè)父容器縮小一倍即可。
具體實(shí)現(xiàn)(主要代碼)：
.parent{
display: flex;
align-items:center;
transform:scale(0.5);
}
.children{
width: 200px; // 原本是100px
}
6唆鸡，動(dòng)畫雪碧圖
涉及的動(dòng)畫十分多涝影，用的元素也十分多，請(qǐng)務(wù)必使用雪碧圖（Sprite）争占！
網(wǎng)上的工具有一些可以幫助你生成雪碧圖的工具燃逻，例如CssGaga，GoPng等等臂痕，自動(dòng)化構(gòu)建工具Grunt和Gulp也提供了相應(yīng)插件伯襟。
特別地，如果單張雪碧圖面積實(shí)在太大握童，可以拆分雪碧圖姆怪，例如拆分成2-4張，因?yàn)楝F(xiàn)代瀏覽器都支持4-6個(gè)同源請(qǐng)求下載澡绩，若資源實(shí)在太多稽揭，也可以考慮把靜態(tài)資源放在不同源域名下去請(qǐng)求，這里犧牲多幾個(gè)請(qǐng)求換來(lái)圖片同時(shí)加載比一張圖片慢慢加載要好肥卡，當(dāng)然溪掀，這需要具體情況去衡量。
順便提一下召调，我寫動(dòng)畫的一個(gè)小技巧是把每一頁(yè)的動(dòng)畫分在一個(gè)import.css里面膨桥，然后最后在主樣式中import進(jìn)去，這樣方便調(diào)試動(dòng)畫唠叛，也容易維護(hù)只嚣，例如：
//style.css@import url("reset.import.css");
@import url("loading.import.css");
@import url("m-animate-1.import.css");
@import url("m-animate-2.import.css");
@import url("m-animate-3.import.css");
當(dāng)然，import不是原生支持的艺沼，這里需要一些流程化工具讓import的頁(yè)面在輸出之前經(jīng)過(guò)組裝-壓縮的步驟册舞。
7，圖片壓縮
圖片壓縮是老生常談障般，但是仍然有不少人忘記壓縮调鲸，那可是活生生的帶寬和流量的浪費(fèi)啊…
壓縮圖片需要有好工具盛杰，有智圖，TinyPNG藐石，JPEGmini等等即供。
依靠工具外，還有以下方式可以優(yōu)化圖片：
1.盡量避免用PNG24于微。如果圖片色彩要求不高逗嫡，請(qǐng)使用PNG8； 2.使用新格式株依，WEBP和BPG等新格式的到來(lái)驱证，在不用考慮兼容的情況下請(qǐng)大膽嘗試； 3.用SVG和ICONFONT代替簡(jiǎn)單的圖標(biāo)恋腕； 4.用FUFU的字蛛來(lái)代替藝術(shù)字體切圖抹锄。
8，多終端兼容
多終端兼容是一切的根基荠藤，要知道有人拿著腎6+伙单，有人拿著腎4，大則414×736商源，小則320×416（IPHONE4在SAFARI保留上下端導(dǎo)航）车份，因此多終端兼容是十分必要的谋减。
曾經(jīng)有一種派系為320派系牡彻，就是大部分頁(yè)面都是320寬度，因此干脆直接用320的容器來(lái)包一切頁(yè)面出爹，那樣也簡(jiǎn)單庄吼，然而IPHOEN6和IPHONE6+的出現(xiàn)簡(jiǎn)直是滅了這個(gè)派系。
那么到底要如何兼容呢严就？
這里我分了三個(gè)時(shí)期來(lái)說(shuō)說(shuō)：
A.設(shè)計(jì)初期总寻。先審視設(shè)計(jì)稿，因?yàn)?20派系的原因梢为，大部分設(shè)計(jì)稿只考慮到IPHONE5來(lái)設(shè)計(jì)渐行，因此很多背景元素是只有320px寬度（頁(yè)面實(shí)際渲染寬度），例如下圖铸董。
那么祟印，這時(shí)候就需要設(shè)計(jì)提供一個(gè)較長(zhǎng)的延伸背景了，最好是可以重復(fù)的粟害，用background-repeat可以減少圖片大小蕴忆。
B.設(shè)計(jì)中期。也就是具體的兼容方法悲幅，可以使用CSS3 Media Query和類覆蓋套鹅。
1.CSS3 Media Query站蝠，按范圍兼容機(jī)型。
/*iphone6*/
@media only screenand (min-device-width : 375px)and (max-device-width : 667px)and (orientation : portrait)and (-webkit-min-device-pixel-ratio : 2){.page6 .ele-building{top: 69px;}.page6 .ele-runner{top: 100px;}.page6 .ele-pophome{top: 16px;}}
2.類覆蓋卓鹿，這種方式適合直接為小屏或大屏做整體兼容菱魔。
首先，為小屏（大屏）加一個(gè)識(shí)別類吟孙，這里小于420表示為小屏幕（IPHONE4有上下導(dǎo)航欄）：
var bh = $(window).height();// 480 - 64 = 416 iphone4
if(bh<420){
$('body').addClass('low-screen');
}
然后豌习，對(duì)應(yīng)識(shí)別類加上要變動(dòng)的元素覆蓋，例如：
.page6 .ele-bg{top: 10px;}
.low-screen .page6 .ele-bg{top: 0px;}
C.設(shè)計(jì)后期拔疚。這是最后一步肥隆，整體檢查和體驗(yàn)，這里面會(huì)暴露一些問(wèn)題稚失，例如元素在IPHONE6P顯得小了或者元素在IPHONE4擠不下了栋艳，可以來(lái)最后大招解決：
1.大屏適當(dāng)用zoom:(倍率)或者transform:scale(倍率)來(lái)增大元素，實(shí)測(cè)失真根本看不出來(lái)句各，設(shè)計(jì)師也滿意（畢竟不用多做一張圖Ｎ肌）；
2.小屏適當(dāng)去掉一些元素凿宾，例如一些翻頁(yè)提示矾屯，一些多余圖標(biāo)，可以讓優(yōu)雅降級(jí)初厚，把它們 display:none掉件蚕。
有以上幾步，基本就能兼容大部分機(jī)器了产禾。兼容一直是個(gè)苦活排作，但是這是前端必修課，多練就會(huì)發(fā)覺(jué)其實(shí)也沒(méi)有那么難嘛亚情。
9妄痪，交互提示
前面說(shuō)了，加了音效就要加上音樂(lè)切換開(kāi)關(guān)的按鈕楞件，不然會(huì)被用戶罵死衫生。還有其他，例如如果你的頁(yè)面不能兼容橫屏土浸，請(qǐng)監(jiān)聽(tīng)橫屏狀態(tài)罪针，然后加上適當(dāng)?shù)臋M屏提示。
例如：
// 橫屏監(jiān)聽(tīng)
var updateOrientation = function(){
if(window.orientation=='-90' || window.orientation=='90'){
$('.landscape-wrap').removeClass('hide');
console.log('為了更好的體驗(yàn)栅迄，請(qǐng)將手機(jī)/平板豎過(guò)來(lái)站故！');
}else{
$('.landscape-wrap').addClass('hide');console.log('豎屏狀態(tài)');
}
};
window.onorientationchange = updateOrientation;
提示越多，界面越友好，有時(shí)候設(shè)計(jì)師會(huì)漏掉一些可能出現(xiàn)的頁(yè)面情況西篓。
作為有態(tài)度的前端愈腾，請(qǐng)好好把關(guān)，讓用戶有好的體驗(yàn)岂津。
10虱黄，分享接口
H5做好了，要傳播分享才能展示你的牛逼轟轟吮成。 然而分享其實(shí)是個(gè)坑橱乱，分享到微信、手Q等都有各種問(wèn)題粱甫。
A.微信
舊微信會(huì)使用WeixinJSBridge來(lái)聲明分享的縮略圖泳叠、標(biāo)題、正文等茶宵，比較方便危纫。例如：
B.手Q
手Q支持聲明meta標(biāo)簽的的分享方式，例如：
而若在http://qq.com域名下也支持api的定義方式乌庶。
C.一般化分享
在默認(rèn)兼容舊版微信种蝶、手Q或者各種瀏覽器，平臺(tái)瞒大，可以用這樣的方法： 寫h1做標(biāo)題螃征，p做內(nèi)容，img做縮略圖透敌，只需要把h1隱藏掉就好盯滚，這里的縮略圖最好要大于200x200px。
例如：
當(dāng)然拙泽，這樣也有利于搜索引擎拉取信息淌山。
分享的坑還有更多，例如不同瀏覽器例如QQ瀏覽器顾瞻、Chrome也會(huì)有自己的默認(rèn)拉取方式（部分截圖作縮略圖），需要多加測(cè)試優(yōu)化德绿。
6荷荤，SEO搜索引擎優(yōu)化
SEO（搜索引擎優(yōu)化）的基本做法是把頁(yè)面結(jié)構(gòu)寫好，這包括：
- 定義精確的網(wǎng)頁(yè)標(biāo)題移稳。你的標(biāo)題應(yīng)該有概括性蕴纳，能明確告知搜索引擎和用戶你的網(wǎng)站大概內(nèi)容和目的，可以是當(dāng)前頁(yè)面標(biāo)題-所屬類型-產(chǎn)品名个粱，例如“全民來(lái)猜歌-年費(fèi)黃鉆-QQ空間”古毛。
- 針對(duì)頁(yè)面內(nèi)容補(bǔ)充description和keywords的meta標(biāo)簽。你需要簡(jiǎn)短總結(jié)頁(yè)面的主要目標(biāo)，然后補(bǔ)充description稻薇，以及根據(jù)關(guān)鍵詞補(bǔ)充keywords嫂冻。
- 優(yōu)化你的超鏈接和圖片。包括優(yōu)化超鏈接顯示的文本塞椎，要具有語(yǔ)義性也要跟超鏈接的網(wǎng)頁(yè)具有相關(guān)性桨仿，例如“<u style="text-decoration: none; border-bottom: 1px dashed rgb(128, 128, 128);">空間主頁(yè)</u>”就不要鏈接到“www.qq.com”。同時(shí)案狠，要補(bǔ)充”title”和”alt”屬性服傍，例如“<img src=’images/apple.jpg’ title=’蘋果示例圖’ alt=’蘋果示例圖’ />”。
- 建立良好的網(wǎng)站導(dǎo)航和sitemap骂铁。網(wǎng)站需要有一個(gè)良好的導(dǎo)航吹零，控制根目錄和各子目錄的關(guān)鍵，通過(guò)sitemap可以幫助網(wǎng)站主了解網(wǎng)站結(jié)構(gòu)拉庵，也方便搜索引擎收錄整個(gè)站點(diǎn)瘪校。
- 優(yōu)化目錄結(jié)構(gòu)和URL。你的URL應(yīng)該有語(yǔ)義性名段，簡(jiǎn)短易懂阱扬，例如http://www.apple.com/macbook-air/，而且每一層級(jí)都要有它對(duì)應(yīng)的頁(yè)面展示以及語(yǔ)義伸辟。
- 善用h1-h6的標(biāo)題結(jié)構(gòu)樹麻惶。合理的標(biāo)題可以強(qiáng)調(diào)文字，也能讓搜索引擎更加了解到各標(biāo)題的重要性信夫，因此建立良好的標(biāo)題樹十分有意義窃蹋。
- 不斷致力于提供優(yōu)質(zhì)的內(nèi)容。社交化分享是網(wǎng)站曝光最快的因素静稻，因此不斷提供了優(yōu)質(zhì)原創(chuàng)內(nèi)容才能真正提高你的網(wǎng)站曝光權(quán)重警没。
11，無(wú)障礙
無(wú)障礙的普及是一件好事振湾，這讓互聯(lián)網(wǎng)真正地為所有人可用杀迹。因此我們也應(yīng)該為之而努力，無(wú)障礙的根基是你頁(yè)面強(qiáng)壯的語(yǔ)義性和結(jié)構(gòu)性押搪，具體可以參考《騰訊網(wǎng)無(wú)障礙說(shuō)明》了解無(wú)障礙的優(yōu)化手段树酪。
參考文章：http://www.reibang.com/p/ebc970078d83， https://cloud.tencent.com/devel
https://zhuanlan.zhihu.com/p/132415861
持續(xù)更新....
