web app遇到的一些坑及小技能（持續更新...）

時間 2021-02-17

標籤 css html ios css3 git github web segmentfault 瀏覽器 app 欄目 HTML 简体版

原文原文鏈接

遇到的一些坑

問題：手機端 click 事件會有大約 300ms 的延遲
css

緣由：手機端事件 touchstart --\> touchmove --> touchend or touchcancel --> click，由於在touch事件觸發以後，瀏覽器要判斷用戶是否會作出雙擊屏幕的操做，因此會等待300ms來判斷，再作出是否觸發click事件的處理，因此就會有300ms的延遲 html

解決方法：使用touch事件來代替click事件，如 zepto.js 的tap事件和fastClick，還有我本身也寫了個移動端手勢操做庫 mTouch，都有相應的事件能夠代替click事件解決這個問題ios
問題：在部分機型下（如小米四、小米2s、中興） body 設置的 font-size 是用 rem 單位的話，若其餘元素沒有設置font-size，該font-size值繼承於body，則會很高几率出現字體異常變大的狀況
css3

緣由：估計是跟app的webview默認設置有關，body的font-size使用rem單位，就是相對於當前根節點的font-size來肯定的，可能在某些webview的設置下，body用的是webview設置的默認字體大小，由於在我給html設置了一個px單位的默認font-size時，仍是會出現字體異常變大的狀況，具體webview的一些細節就沒有再研究了 git

解決方法：body設置一個px單位的默認font-size值，不用rem，或者給字體會異常變大的元素設定一個px單位的font-size值github
問題：使用zepto的 tap 事件時會出現「點透」bug，好比：一個元素A綁定了tap事件，緊跟其後的元素B綁定了click事件，A觸發tap事件時將本身remove掉，B就會自動「掉」到A的位置，接下來就是不正常的狀況，由於這個時候B的click事件也觸發了
web

緣由：由於tap事件是經過 touchstart 、touchmove 、 touchend 這三個事件來模擬實現的，在手機端事件機制中，觸發touch事件後會緊接着觸發touch事件座標元素的click事件，由於B元素在300ms內恰好「掉」回來A的位置，因此就觸發了B的click事件，還有zepto的tap事件都是代理到body的，因此想經過e.preventDefault()阻止默認行爲也是不可行的 segmentfault

解決方法：（1）A元素換成click事件；（2）使用我寫的庫 mTouch 來給A綁定tap事件，而後在事件回調中經過e.preventDefault()來阻止默認行爲，或者換用其餘的支持tap事件的庫瀏覽器
問題 ios自動識別數字爲手機號碼，致使部分設置好的樣式無效（字體顏色等）
app

緣由 ios自動識別數字後會給數字加上 <a href="tel:數字">數字</a> 標籤，因此數字的部分樣式繼承了a標籤的樣式，致使部分樣式無效

解決方法：（1）meta 標籤加上 <meta name="format-detection" content="telephone=no" /> 阻止默認識別數字爲電話；（2）設置樣式的時候 css 選擇器把a標籤選上，如：
```
<span class="number">123<span> 
// 原來樣式
.number {
color: #f00;
} 
// 修改後樣式
.number, .number a {
color: #f00;
}
```

一些有用技能點

經過設置css屬性 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);取消掉手機端webkit瀏覽器點擊按鈕或超連接之類的默認灰色背景色
設置css屬性 -webkit-user-select:none; 控制用戶不可選擇文字
區域性 overflow: scroll | auto 滾動時使用原生效果：-webkit-overflow-scrolling: touch （ios8+，Android4.0+）

單行、多行溢出省略

/* 單行省略 */
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

/* 多行省略 */
.ellipsis-2l {
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;    /* 數值表明顯示幾行 */
-webkit-box-orient: vertical;
}

垂直居中經常使用方法：

<!-- html結構 -->
<body>
<div class="wrap">
    <div class="box"></div>
</div>
</body>

/* css樣式 */

/* (1) 模仿單行文字居中的方式 */
.wrap {
width: 200px;
height: 80px;
line-height: 80px;
}

.box {
display: inline-block;
vertical-align:middle;
}

/* (2) 已知寬高，經過position:absolute; */
.wrap {
width: 200px;
height: 200px;
position: relative;
}

.box {
width: 100px;
height: 80px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -40px;
}

/* (3) 未知寬高，經過css3屬性 transfrom */
.wrap {
width: 200px;
height: 200px;
position: relative;
}

.box {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}

/* (4) 經過flex佈局 */
<!-- html結構 -->
<body>
<div class="wrap flexbox flexbox-center flexbox-middle">
    <div class="box"></div>
</div>
</body>

/* css樣式 */

.flexbox {
display: -webkit-box; 
display: -moz-box; 
display: -ms-flexbox; 
display: -webkit-flex;
display: flex;
}

/* 水平居中 */
.flexbox-center {
-webkit-box-pack: center; 
-moz-box-pack: center; 
-ms-flex-pack: center; 
-webkit-justify-content: center;
justify-content: center;
}

/* 垂直居中 */
.flexbox-middle {
-webkit-box-align: center; 
-moz-box-align: center;
-ms-flex-align: center; 
-webkit-align-items: center;
align-items: center;
}

retina屏幕實現真正的1px邊框

<!-- html結構 -->
<body>
<div class="box retina-border rt-bd-all"></div>
</body>

/* css樣式 */

.box {
width: 200px;
heigth: 100px;
box-sizing: border-box;
border: 1px solid #aaa;
}

/* 去掉元素原有的邊框 */
.retina-border {
position: relative;
border: none;
}

/* 經過設置僞元素放大到2倍的寬高，設置1px邊框，再縮小1倍，以達到0.5px邊框的效果*/
.retina-border:after {
content: '';
display: block;
width: 200%;
height: 200%;
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
border: 0px solid #aaa;
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transform: scale(.5);
transform: scale(.5);
}

.rt-bd-all:after {
border-width: 1px;
}

/* 若是隻是想設置一條邊框，能夠這樣改一下，以此類推 */

<!-- html結構 -->
<body>
<div class="box retina-border rt-bd-b"></div>
</body>

/* css樣式 */

.tr-bd-b:after {
border-bottom-width: 1px;
}

.tr-bd-t:after {
border-top-width: 1px;
}

.tr-bd-l:after {
border-left-width: 1px;
}

.tr-bd-r:after {
  border-right-width: 1px;
}