移動端兼容
css篇
移動端的 1px
問題描述：1px 的邊框。在高清屏下，移動端的 1px 會很粗。
產生原因：首先先要了解一個概念：DPR(devicePixelRatio) 設備像素比，它是默認縮放為 100%的情況下，設備像素和 CSS 邏輯像素的比值。目前主流的屏幕 DPR=2 或者 3。CSS中設置的px是邏輯像素,這就造成1px變成物理像素的2px或者3px，比如2 倍屏，設備的物理像素要實現 1 像素，所以 CSS 邏輯像素只能是 0.5px。
下面介紹最常用的方法
通過??CSS :before 選擇器??或??CSS :after 選擇器??設置??height:1px??，同時縮放0.5倍實現。
/* 底邊框 */
.b-border {
position: relative;
}
.b-border:before {
content: ;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: #d9d9d9;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
/* 四條邊 */
.setBorderAll {
position: relative;
&:after {
content: ;
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: left top;
box-sizing: border-box;
border: 1px solid #e5e5e5;
border-radius: 4px;
}
}
復制代碼
CSS動畫頁面閃白,動畫卡頓
問題描述：CSS動畫頁面閃白,動畫卡頓
解決方法: 1.盡可能地使用合成屬性transform和opacity來設計CSS3動畫，不使用position的left和top來定位 2.開啟硬件加速
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
復制代碼
屏蔽用戶選擇
禁止用戶選擇頁面中的文字或者圖片
div {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
復制代碼清除輸入框內陰影
問題描述：在 iOS 上，輸入框默認有內部陰影 解決方式：
input {
-webkit-appearance: none;
}
復制代碼禁止保存或拷貝圖像
img {
-webkit-touch-callout: none;
}
復制代碼輸入框默認字體顏色設置
設置 input 里面 placeholder 字體的顏色
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #c7c7c7;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #c7c7c7;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #c7c7c7;
}
復制代碼
用戶設置字號放大或者縮小導致頁面布局錯誤
設置字體禁止縮放
body {
-webkit-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
-moz-text-size-adjust: 100% !important;
}
復制代碼android系統中元素被點擊時產生邊框
部分android系統點擊一個鏈接，會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣。去除代碼如下
a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0)
-webkit-user-modify:read-write-plaintext-only;
}
復制代碼iOS 滑動不流暢
ios 手機上下滑動頁面會產生卡頓，手指離開頁面，頁面立即停止運動。整體表現就是滑動不流暢，沒有滑動慣性。 iOS 5.0 以及之后的版本，滑動有定義有兩個值 auto 和 touch，默認值為 auto。
- 解決方式 1.在滾動容器上增加滾動 touch 方法
.wrapper {
-webkit-overflow-scrolling: touch;
}
復制代碼2.設置 overflow 設置外部 overflow 為 hidden,設置內容元素 overflow 為 auto。內部元素超出 body 即產生滾動，超出的部分 body 隱藏。
body {
overflow-y: hidden;
}
.wrapper {
overflow-y: auto;
}
復制代碼html 篇
常用的meta屬性設置
meta對于移動端的一些特殊屬性，可根據需要自行設置
//禁止 iOS 識別長串數字為電話
//Android 禁止屏幕旋轉
//不讓 Android 手機識別郵箱
//禁止電話號碼識別
//全屏顯示
//H5頁面窗口自動調整到設備寬度，并禁止用戶縮放頁面
//當網站添加到主屏幕快速啟動方式，可隱藏地址欄，僅針對ios的safari ios7.0版本以后，safari上已看不到效果
將網站添加到主屏幕快速啟動方式，僅針對ios的safari頂端狀態條的樣式
復制代碼
a標簽喚起原生應用
同樣地，我們也可以通過標簽屬性來開啟長按郵箱地址彈出郵件發送的功能：
dooyoe@gmail.com //喚起郵箱
123456 //喚起電話
復制代碼
js篇
iPhone7用for...in 遍歷數組失效
問題描述：最初學習使用js時，覺得??for...in??遍歷比??for循環??簡潔，后期在用戶反饋后發現iPhone7不支持用for...in遍歷數組
解決方式： 改為??for循環??遍歷
移動端點擊事件300 ms延遲問題
問題描述：移動端web網頁是有300ms延遲的，往往會造成按鈕點擊延遲甚至是點擊失效。
解決方式：
- fastclick可以解決在手機上點擊事件的300ms延遲
- zepto.js的touch模塊，tap事件也是為了解決在click的延遲問題
audio 和 video 在 ios 和 andriod 中自動播放
出于優化用戶體驗，蘋果系統和安卓系統通常都會禁止自動播放和禁止頁面加載時使用 JS 觸發播放，必須由用戶主動點擊頁面才可以觸發播放。通過給頁面根元素加touchstart的監聽事件實現觸發播放
$(html).one(touchstart, function() {
audio.play()
})
復制代碼iOS 上拉邊界下拉出現空白
問題描述：手指按住屏幕下拉，屏幕頂部會多出一塊白色區域。手指按住屏幕上拉，底部多出一塊白色區域。
產生原因：在 iOS 中，手指按住屏幕上下拖動，會觸發 touchmove 事件。這個事件觸發的對象是整個 webview 容器，容器自然會被拖動，剩下的部分會成空白。
解決方式：
document.body.addEventListener(
touchmove,
function(e) {
if (e._isScroller) return
// 阻止默認事件
e.preventDefault()
},
{
passive: false
}
)
復制代碼
ios 日期轉換 NAN 的問題
將日期字符串的格式符號替換成/
yyyy-MM-dd.replace(/-/g, /)
復制代碼
軟鍵盤問題
iOS 系統中文輸入法輸入英文時，字母之間可能會出現一個六分之一空格
解決方式：可以通過正則去掉
this.value = this.value.replace(//u2006/g, );
復制代碼
IOS 鍵盤彈起擋住原來的視圖
解決方式：
- 可以通過監聽移動端軟鍵盤彈起 ?
?Element.scrollIntoViewIfNeeded（Boolean）??方法用來將不在瀏覽器窗口的可見區域內的元素滾動到瀏覽器窗口的可見區域。 如果該元素已經在瀏覽器窗口的可見區域內，則不會發生滾動。 - true，則元素將在其所在滾動區的可視區域中居中對齊。
- false，則元素將與其所在滾動區的可視區域最近的邊緣對齊。 根據可見區域最靠近元素的哪個邊緣，元素的頂部將與可見區域的頂部邊緣對準，或者元素的底部邊緣將與可見區域的底部邊緣對準。
window.addEventListener(resize, function() {
if (
document.activeElement.tagName === INPUT ||
document.activeElement.tagName === TEXTAREA
) {
window.setTimeout(function() {
if (scrollIntoView in document.activeElement) {
document.activeElement.scrollIntoView(false)
} else {
document.activeElement.scrollIntoViewIfNeeded(false)
}
}, 0)
}
})
復制代碼onkeyUp 和 onKeydown 兼容性問題
IOS 中 input 鍵盤事件 keyup、keydown、等支持不是很好, 用 input 監聽鍵盤 keyup 事件，在安卓手機瀏覽器中沒有問題，但是在 ios 手機瀏覽器中用輸入法輸入之后，并未立刻相應 keyup 事件
IOS12 輸入框難以點擊獲取焦點，彈不出軟鍵盤
定位找到問題是 fastclick.js 對 IOS12 的兼容性，可在 fastclick.js 源碼或者 main.js 做以下修改
FastClick.prototype.focus = function(targetElement) {
var length
if (
deviceIsIOS &&
targetElement.setSelectionRange &&
targetElement.type.indexOf(date) !== 0 &&
targetElement.type !== time &&
targetElement.type !== month
) {
length = targetElement.value.length
targetElement.setSelectionRange(length, length)
targetElement.focus()
} else {
targetElement.focus()
}
}
復制代碼IOS 鍵盤收起時頁面沒用回落，底部會留白
通過監聽鍵盤回落時間滾動到原來的位置
window.addEventListener(focusout, function() {
window.scrollTo(0, 0)
})
//input輸入框彈起軟鍵盤的解決方案。
var bfscrolltop = document.body.scrollTop
$(input)
.focus(function() {
document.body.scrollTop = document.body.scrollHeight
//console.log(document.body.scrollTop);
})
.blur(function() {
document.body.scrollTop = bfscrolltop
//console.log(document.body.scrollTop);
})
復制代碼IOS 下 fixed 失效
問題描述：軟鍵盤喚起后，頁面的 fixed 元素將失效，變成了 absolute，所以當頁面超過一屏且滾動時，失效的 fixed 元素就會跟隨滾動了。不僅限于 ??type=text?? 的輸入框，凡是軟鍵盤（比如時間日期選擇、select 選擇等等）被喚起，都會遇到同樣地問題。 解決方法: 不讓頁面滾動，而是讓主體部分自己滾動,主體部分高度設為 100%，??overflow:scroll??
復制代碼
.warper {
position: absolute;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.fix-bottom {
position: fixed;
bottom: 0;
width: 100%;
}
最后
如果你覺得此文對你有一丁點幫助，點個贊。或者可以加入我的開發交流群：1025263163相互學習，我們會有專業的技術答疑解惑
如果你覺得這篇文章對你有點用的話，麻煩請給我們的開源項目點點star: ??https://gitee.com/ZhongBangKeJi/CRMEB??不勝感激 ！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/124355.html
