一些移動端開發遇到的坑

微信內置瀏覽器背景顏色問題

通常來講在開發時看到手機默認的背景顏色是白色，然而有些手機的背景顏色卻不是白色的。因此爲了保證背景色是白色（你須要的顏色）能夠在在reset.css統一設置背景顏色

在ios使用document.execCommand複製文字

ios下需多調用一下focus()方法才能複製成功

var txt = document.getElementById('elemId')
txt.focus() // ios下須要調用，Android能夠不用
txt.select()
txt.setSelectionRange(0, txt.value.length)
if (document.execCommand('copy', true, null)) {
  // 複製成功
} else {
  // 網頁不兼容，沒法複製
}
複製代碼

ios調用focus()無效問題

有時調用focus()使input進行自動聚焦時，你會發如今ios真機上無效。那是由於要是ios上focus()要生效的前提必須是用戶手動觸發的事件，不是用戶觸發的事件，而單獨設置focus()聚焦是沒用的。

html
<div class='seacrh'>
    <div class='search_txt'>搜索你想購買的商品</div>
</div>

js
document
    .getElementsByClassName('seacrh')[0]
    .addEventListener('click', searcHandle, false)
    
function searcHandle () {
    // 要聚焦的input元素
    document.querySelector('.inputClass').focus()
}
複製代碼

ios脫離文檔流滾動bug

segmentfault.com/a/119000001…

segmentfault.com/a/119000001…

微信內置瀏覽器瀏覽的H5頁面input彈出鍵盤時遮蓋文本框

if (document.activeElement.tagName === 'INPUT' ||
 document.activeElement.tagName === 'TEXTAREA') {
  window.setTimeout(() => {
    document.activeElement.scrollIntoViewIfNeeded()
  }, 0)
}
複製代碼

鍵盤窗口關閉後留白問題，需再次點擊才能恢復

在輸入框失去焦點時執行：

setTimeout(function () {
  window.scrollTo(0, 0)
}, 0)
複製代碼

移動端字體變大問題

問題： 在webkit的瀏覽器內核中，當頁面中的標籤數量或者文本數量大於某一個值，或者當CSS定義的字體大小落在某個區間時，字體會被放大，使得原始定義的字體也被放大。

緣由： webkit內核的瀏覽器有個特性：「Text Autosizer」，又稱「Font Boosting」，是 Webkit 給移動端瀏覽器提供的一個特性：當咱們在手機上瀏覽網頁時，極可能由於原始頁面寬度較大，在手機屏幕上縮小後就看不清其中的文字了。而 Font Boosting 特性在這時會自動將其中的文字字體變大，保證在即不須要左右滑動屏幕，也不須要雙擊放大屏幕內容的前提下，也可讓人們方便的閱讀頁面中的文本。

解決方案：

一、手動指定 viewport width=320，這時 Font Boosting 不會被觸發

二、FontBoosting 僅在未限定尺寸的文本流中有效，給元素指定寬高，就能夠避免 Font Boosting 被觸發

三、顯然第 2 條方案是有缺陷的，文本內容不可能都指定寬高。不過還好，咱們經過指定max-height ,min-height, min-width, max-width

div,p{
    max-height:999999px;
    max-width:999999px
}
複製代碼

ios中慎用position: fixed/absolute

IOS下box-shadow的詭異bug

公司項目要加個引導功能；之前引導的步驟是使用的圖片，而後經過絕對定位實現。然而此次不能使用圖片，要根據元素區域高亮來實現引導。 相似於

一看，元素高亮，周圍還要有蒙版，很差搞呀~ ~

google一下，最後思考查找發現有兩種實現方式

一、box-shadow經過設置一個大的陰影值達到蒙版的效果。

二、使目標元素浮起來，再使其z-index的值大於蒙版的z-index值，達到高亮的效果

使用後發現第二種方法比較麻煩且，且在ios上容易出現bug，特別是當使用了-webkit-overflow-scrolling: touch來優化ios滾動效果和position:absolute;。你會發現z-index無效。必須讓目標元素位於蒙版元素以後才行。

因此選擇使用box-shadow實現。

box-shadow: rgba(0, 0, 0, 0.7) 0px 0px 1px 10000px;
複製代碼

問題來了~真機一看，個人f***，沒高亮了？emmm...加上-webkit-box-shadow和-webkit-appearance:none看看；額~依然不行，我太難了！！！。以後猜測多是shadow值太大，無奈把10000改爲1000試一下。嗯，運氣挺好，行了！雖然能夠了可是一臉矇蔽，不知其因此然呀(＃￣～￣＃)，果斷google去。

如下是google看到的結論

2039px這個是邊界值（準確來講是2039.98px）當尺寸小於等於這個值的時候是顯示正常的，大於這個值是不能顯示box-shadow的

還有另外一種狀況：元素同時設置border-radius和box-shadow的時候：若是圓角的值一致，請確保這兩個值的和不超過2044px，若是必定會超過的話，請微小修改其中一個圓角的值，好比5.999px

box-shadow: 0px 0px 0px 2039px #000;
border-radius: 6px 6px 6px 90px;
// 顯示正常
box-shadow: 0px 0px 0px 2039px #000;
border-radius: 6px 6px 6px 6px;
// 不顯示
box-shadow: 0px 0px 0px 2039px #000;
border-radius: 6px 6px 5.9999px  6px;
// 顯示正常
複製代碼

參考地址：

IOS下box-shadow的詭異bug的修復

jquery-pagewalkthrough

introjs.com/

fullpage.js證書問題

fullpage3.0以後是有證書認證的，沒有買的會報如下錯誤：

解決方法我就不貼出來了。emmm...不知道解決能夠聯繫我。