前兩天翻后臺(tái)數(shù)據(jù)給我看懵了，手機(jī)訪問量嘩嘩往下掉，明明電腦端挺正常的。這不行，趕緊抓起手機(jī)自己測(cè)試，結(jié)果一測(cè)臥槽，慢得跟蝸牛爬似的。

開始動(dòng)手查毛病

我先拿自己手機(jī)打開網(wǎng)頁，好家伙，等了五秒才刷出個(gè)標(biāo)題！氣死人了。趕緊掏工具測(cè)加載速度，結(jié)果發(fā)現(xiàn)光圖片就把網(wǎng)頁撐爆了。有些圖尺寸比手機(jī)屏幕還大三圈，硬生生在那擠著下載，用戶流量嘩嘩燒，人家不跑才怪。

當(dāng)時(shí)腦子一熱就開始刪東西：

• 特效插件咔咔卸了好幾個(gè)
• 輪播大圖直接換成靜態(tài)小圖
• 高清產(chǎn)品圖全給壓縮到指甲蓋大小

折騰完用流量重新開網(wǎng)頁，這回倒是兩秒就打開了。

剛喘口氣又栽坑里

正美滋滋看數(shù)據(jù)回升，同事突然微信轟炸我：“你網(wǎng)頁右邊怎么缺一塊？”。趕緊借他手機(jī)一看，臥槽整個(gè)側(cè)邊欄被擠到屏幕外頭了！原來這破模板在部分安卓機(jī)上根本不會(huì)自動(dòng)縮放，內(nèi)容排版全亂了。

連夜爬起來改代碼：

• 所有寬度單位從px改成百分比
• 表格布局全換成彈性盒子
• 媒體查詢挨個(gè)型號(hào)測(cè)試

累得我眼皮直打架，舉著五個(gè)手機(jī)反復(fù)橫豎屏切換，生怕再漏掉哪個(gè)破機(jī)型。

字體又搞事情

好不容易撐到早上，運(yùn)營(yíng)妹子舉著蘋果手機(jī)過來罵人了：“你字小得要用放大鏡看！”這才想起IOS默認(rèn)字體和安卓不一樣，我用的12px在蘋果上看著像螞蟻爬。真是一坑接一坑。

抄起鍵盤繼續(xù)改：

• 絕對(duì)字號(hào)全改成相對(duì)單位
• 按鈕尺寸放大到拇指能戳中
• 行距拉寬到能塞進(jìn)米粒

改完拿給我媽試，五十歲的人總算不用瞇著眼睛劃拉了。

最坑爹的來了

以為完事兒了？天真！隔天看跳出率還是高，自己體驗(yàn)才發(fā)現(xiàn)：文章里的超鏈接挨得跟芝麻餅似的，想點(diǎn)“評(píng)論”結(jié)果戳中“收藏”，返回鍵藏得比地鼠還深。氣得我差點(diǎn)把手機(jī)砸了。

徹底大掃除：

• 鏈接間隔拉到至少5毫米
• 面包屑導(dǎo)航加粗標(biāo)紅
• 底部固定了顯眼的返回箭頭

現(xiàn)在單手刷頁面也不會(huì)誤觸了，手指頭粗的老爺們也能精準(zhǔn)戳中目標(biāo)。