移動端問題探索-2

1.阻止旋轉屏幕時自動調整字體大小

移動端開發時，屏幕有豎屏和橫屏模式，當屏幕進行旋轉時，字體大小則有可能會發生變化，從而影響頁面佈局的總體樣式，爲避免此類狀況發生，只需設置以下樣式便可

* { -webkit-text-size-adjust: none; }

2.iOS下取消input在輸入的時候英文首字母的默認大寫

<input type="text" autocapitalize="none">

3.禁止 iOS 彈出各類操做窗口

-webkit-touch-callout: none;

4.禁止ios和android用戶選中文字

-webkit-user-select: none;

4.一些狀況下對非可點擊元素如(label,span)監聽click事件，ios下不會觸發

針對此種狀況只須要對不觸發click事件的那些元素添加一行css代碼便可

cursor: pointer;

5.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);

iOS系統中文輸入法輸入英文時，字母之間可能會出現一個六分之一的空格

解決方法：經過正則去除

this.value = this.value.replace(/\u2006/g, '');

input的placeholder會出現文本位置偏上的狀況

input 的placeholder會出現文本位置偏上的狀況：PC端設置line-height等於height可以對齊，而移動端仍然是偏上，解決方案時是設置css

line-height：normal;