移動端佈局與樣式上的坑

移動端佈局與樣式上的深坑--（持續更新）

 

Flex兼容

Flex想要兼容衆多花樣式手機，要注意如下這麼些

• 前綴要考慮2009~2012年的語法[webkit-box,flex,flex-box]
• 少用複合屬性，好比flex:1，考慮兼容理應拆成[flex-grow,flex-shrink,flex-basis]；flex-flow拆開成[flex-direction,flex-wrap]

demo{ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ }

 

IOS的H5頁面scroll不流暢解決方案

在滾動包裹層添加這麼一條私有前綴樣式便可享受相似APP的滑動效果，不只絲滑，還帶彈性！

.contain{ -webkit-overflow-scrolling : touch; }

IOS 遮罩層較好方案

拒絕採用fixed！！！！！

遮罩層採用position:absolute來置頂，內部元素採用flex來佈局； 
這種寫法能夠避免一大堆天坑！！！

如果實在不信邪，滾動的時候，微信端這些你就會感覺到花兒爲何這樣紅了。。。

IOS滾動窗滑動到底部還能彈窗拖拉的奇葩修復

這個方案是經過計算離底部多遠加狀態來阻止touch事件

// 防止內容區域滾到底後引發頁面總體的滾動 var content = document.querySelector('main'); var startY; content.addEventListener('touchstart', function (e) { startY = e.touches[0].clientY; }); content.addEventListener('touchmove', function (e) { // 高位表示向上滾動 // 底位表示向下滾動 // 1允許 0禁止 var status = '11'; var ele = this; var currentY = e.touches[0].clientY; if (ele.scrollTop === 0) { // 若是內容小於容器則同時禁止上下滾動 status = ele.offsetHeight >= ele.scrollHeight ? '00' : '01'; } else if (ele.scrollTop + ele.offsetHeight >= ele.scrollHeight) { // 已經滾到底部了只能向上滾動 status = '10'; } if (status != '11') { // 判斷當前的滾動方向 var direction = currentY - startY > 0 ? '10' : '01'; // 操做方向和當前容許狀態求與運算，運算結果爲0，就說明不容許該方向滾動，則禁止默認事件，阻止滾動 if (!(parseInt(status, 2) & parseInt(direction, 2))) { e.preventDefault(); stopEvent(e); } } });

 

 

IOS 默認輸入框內陰影重置

/*E:這個是代指字符，實際本身替換，ID,CLASS,TAG*/ E{ border: 0; -webkit-appearance: none; }

旋轉屏幕時，字體大小調整的問題

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust:100%; }

 

默認啓用GPU渲染頁面

這個具體要看你的實際做用範圍，無非就經過一些特殊屬性來強制開啓 
- transform:translateZ(0): Z軸會啓用GPU，請自行帶前綴 
- 調用preserve-3d或者animation也會

transition閃屏

/設置內嵌的元素在 3D 空間如何呈現：保留3D / -webkit-transform-style: preserve-3d; / 設置進行轉換的元素的背面在面對用戶時是否可見：隱藏 / -webkit-backface-visibility:hidden;

placeholder的顏色值改變

input::-webkit-input-placeholder{color:#F40;} input:focus::-webkit-input-placeholder{color:#F40;}

 

移動端禁止選中內容

E { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all （移動端不須要） */ -ms-user-select: none; /* IE 10+ */ }

 

IOS禁止保存或拷貝圖像

img { -webkit-touch-callout: none; }

 

經常使用的移動端meta

<!-- 禁止頁面縮放 --> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <!-- 設置Web應用是否以全屏模式運行。--> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 啓動或禁用自動識別頁面中的電話號碼。--> <meta name="format-detection" content="telephone=no"> <!-- 設置緩存，看實際需求設置 --> <meta http-equiv="Cache-Control" content="no-cache" /> <!-- 優先使用最新版本 IE 和 Chrome--> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- QQ瀏覽器私有 --> <!-- 全屏模式 --> <meta name="x5-fullscreen" content="true"> <!-- 強制豎屏 --> <meta name="x5-orientation" content="portrait"> <!-- 強制橫屏 --> <meta name="x5-orientation" content="landscape"> <!-- 應用模式 --> <meta name="x5-page-mode" content="app"> <!-- UC瀏覽器私有 --> <!-- 全屏模式 --> <meta name="full-screen" content="yes"> <!-- 強制豎屏 --> <meta name="screen-orientation" content="portrait"> <!-- 強制橫屏 --> <meta name="screen-orientation" content="landscape"> <!-- 應用模式 --> <meta name="browsermode" content="application">

IOS中input鍵盤事件調用緩慢

直接改成監聽input事件

document.getElementById('test').addEventListener('input',fn,false);

頁面高度渲染錯誤

document.documentElement.style.height = window.innerHeight + 'px';

 

怪異懸浮的表單

在部分android 機型中的輸入框可能會出現如圖怪異的多餘的浮出表單，通過觀察與測試發現只有input:password類型的輸入框存在，那麼咱們只要使用input:text類型的輸入框並經過樣式-webkit-text-security: disc; 隱藏輸入密碼從而解決。

input[type=text]{ -webkit-text-security: disc; }