那些移動端web踩過的坑

扔了n久，還是撿回來了。好好弄一下吧。剛工作的時候挺忙的，後來不那麼忙了，但是變懶了。

這一年大多數時間都在在做移動端的東東，做了之後才發現，同樣是web前端，移動端的坑真的是深不可測，各種各樣的，只有想不到，沒有遇不到。在這裡把最近踩過的坑整理一下。

首先，要解決的關鍵問題是如何為裝置選擇可視視口尺寸，採用理想視口尺寸作為可視視口尺寸，**也十分簡單，只需要將縮放比定為 1

name="viewport"
content="initial-scale=1,maximum-scale=1, minimum-scale=1">

之所以把它放在第乙個也是因為這個印象最深，記得第一次做移動端html5頁面的時候，啥都不懂，還在用px作為畫素單位，當然這個px是相對的（關於px可參考css 長度單位知多少），然而在移動端使用px是相當不靠譜的，隨隨便便換乙個大小不一樣的裝置，可能就會出現樣式錯亂。。。當然後來使用了rem，眾所周知1rem=1 htmlfontsize,所以這裡只要我們把html的字型大小事先定好，就可以基本上解決字型的適配問題。那麼怎麼選擇這個htmlfontsize呢？

一般ui的設計稿都是3倍大小，這裡已1080為例子（我拿到的一般都是1080的），實際上就是360px寬度的device，比如我自己習慣上想讓1rem=100px(這裡的px是實際畫素，相當於設計稿的300畫素)，那麼問題關鍵就在於，htmlfontsize的多少px正好對應設計稿的300px，那麼根元素html的fontsize（設為fz）與裝置實際寬度(設為dw)的對應關係應為：

dw/1080 = fz/300
fz = dw/3.6

這樣，你的裝置寬度用rem表示其實就是3.6rem，即使不是360px，也可以按比例來縮放，而設計稿中的每300px對應為1rem，使用rem布局，字型大小就可以隨著裝置寬度來自己調整。

123

4567

function
setrootfontsize() 
window.addeventlistener("resize",setrootfontsize);
setrootfontsize();

這段**基本上可以滿足字型在移動端的自適應要求，可是如果使用者主動把裝置字型調大，也就是1px對應的大小變大，字型雖然px數不變，顯示還是會變大，而有些比較複雜的h5頁面字型稍微有些變化就會有問題，所以有時候還需要限定頁面的字型大小不隨裝置字型的調整而影響，這時需要用到getcomputedstyle這個方法，getcomputedstyle是乙個可以獲取當前元素所有最終使用的css屬性值（可參考獲取元素css值之getcomputedstyle方法熟悉）。通過對比算出來的fz和實際的realfz，對其進行相應縮放即可。

123

4567

8910

function
setrootfontsize() 
}window.addeventlistener("resize",setrootfontsize);
setrootfontsize();

這個坑應該做過移動端的都踩過（只是大多數情況根本不算坑，然而我要做的東西基本上都要禁掉這玩意），試過很多方法，都不是很理想，最終的解決方案就是禁用父級元素的滾動，手動模擬滾動條：

123

4567

891011

1213

1415

1617

1819

2021

2223

2425

2627

2829

3031

3233

3435

3637

3839

4041

4243

4445

4647

4849

5051

5253

5455

5657

5859

6061

6263

6465

6667

6869

7071

7273

7475

var scroll = function(container, childselector, style) 
if (container.css('position') === 'static') 
var child = container.find(childselector);
child.css();
var childtop = 0; //距離容器頂部的距離 
var conheight = container.height(); //容器高度
var childheight = child.height(); //子容器高度
var diffheight = conheight - childheight; //父子容器高度差
var clienty = 0; //手指在當前物件上觸控時的座標
//新增滾動條
var defaultstyle = ;
$.extend(defaultstyle, style);
if (!defaultstyle.height)  else 
}if (!defaultstyle.top && !defaultstyle.right && !defaultstyle.bottom && !defaultstyle.left) 
var scrollbar = $('');
scrollbar.css(defaultstyle);
container.find('.scroll-bar').remove();
//繫結前先移除事件
container.off('touchstart');
container.off('touchmove');
container.on('touchstart', function(e) );
container.on('touchmove', function(e) 
if (temptop >= 0)  
child.css();
scrollbar.css()
});}
scroll($('.parent'), '.child')

原理其實還是很簡單，先計算一下滾動條的高度，然後按照比例去設定transform（還有很多可優化擴充套件的地方），第乙個引數是父元素的zepto（或jquery）選擇器物件,第二個引數是需要滾動的子元素包裹層，第三個是滾動條的樣式（可選，有預設），需要把parent元素設定為overflow：hidden，child元素的height設定為auto。

這個也是只有移動端才有的坑，類似與一種穿透吧，手指在彈出層滑動的同時，如果底層有滾動條的話也會跟著一起滑動,解決方案:

css新增：

123

/*禁止modal底層滾動*/

body

.dialog-open

js新增

123

4567

891011

1213

var scroll_top = 0;
/*禁止modal帶動底部滾動*/
function
to(scrolltop)
function
getscrolltop()
/*modal彈出時使用*/
scroll_top = getscrolltop();
document.body.classlist.add('dialog-open'); 
document.body.style.top = -scroll_top + 'px';
/*modal關閉時使用*/
to(scroll_top);

這算是zepto的乙個bug了，具體這個bug的源頭還得追到zepto對於tap事件的模擬（參考也來說說touch事件與點選穿透問題），我後來用的解決方法也是參考這裡來的，就是使用pointer-events這個屬性，這裡就不多介紹了,這裡的第三種方法，使用fastclick庫模擬click也可以完美解決移動端的點穿問題。

123

4567

8910

$('#closepopup').on('tap', function(e), 400);
});

參考鏈結

【領取方法】

那些移動端web踩過的坑

那些年踩過的CSS坑

WebRTC sdk 封裝踩過的那些坑

那些Ubuntu裡踩過的坑

那些移動端web踩過的坑

那些年踩過的CSS坑

WebRTC sdk 封裝踩過的那些坑

那些Ubuntu裡踩過的坑

相關推薦