1.input[type=checkbox]在ios端樣式顯示異常,黑色背景或邊框,安卓正常
解決:
input[type=checkbox]:checked{ background-color: transparent; border: none; }
2.option標簽在ios端不支持在onfocus事件中渲染dom,安卓和vue不影響
解決:
正常步驟,可在頁面加載時提前加載數據渲染dom
3.ios的input失焦時,喚醒鍵盤后頁面高度變低,后滑動的頁面無法正常回彈
解決:
1》.看滑動的部分父元素是否有height:100%,去掉或還原成默認高度:
height:auto
2》.在失焦事件中強制還原頁面高度:
$("input,select").blur(function(){ setTimeout(function() { var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0; window.scrollTo(0, Math.max(scrollHeight - 1, 0)); }, 100); })
4.移動端上拉下滑滾動條卡頓,啟動硬件加速
body {
-webkit-overflow-scrolling:touch;
overflow-scrolling: touch;
}
備注:無效的時候考慮可能客戶端打包時的內核版本過舊,需要客戶端升級
5.移動端點擊事件為了驗證用戶是否在做雙擊事件延遲300ms
方法1.在mate標簽添加user-scalabel=no,禁用用戶縮放網頁
方法2.fastclick.js。原理:在檢測到touchend事件的時候 ,會通過DOM自定義事件立即出發模擬一個click事件,並把瀏覽器在300ms之后真正的click事件阻止掉
6.移動端1px顯示兼容問題:如iphone4機型的retina屏幕的1px邊框顯示粗
原因:設計稿的1px/750px設計稿,小屏幕1px/375px,實際應是0.5px
解決:偽元素+transform實現:為什么用偽元素? 因為偽元素 ::after 或 ::before 是獨立於當前元素,可以單獨對其縮放而不影響元素本身的縮放
.border-1px:before{ content: ''; position: absolute; top: 0; height: 1px; width: 100%; background-color: #999; transform-origin: 50% 0%; } @media only screen and (-webkit-min-device-pixel-ratio:2){ .border-1px:before{ transform: scaleY(0.5); } } @media only screen and (-webkit-min-device-pixel-ratio:3){ .border-1px:before{ transform: scaleY(0.33); } }