移動端布局常見問題
1 橫豎屏限制問題
<meta name="x5-orientation" content="portrait | landscape" />
只支持x5內核，指的是強制進行橫屏或豎屏，
portrait是豎屏，landscape是橫屏。
<meta name="screen-orientation" content="portrait">
只支持uc瀏覽器，指UC瀏覽器強制豎屏。
2 全屏限制問題
<meta name="x5-fullscreen" content="true" />
只支持x5內核，只QQ應用模式，強制全屏。
<meta name="full-screen" content="yes">
只支持uc瀏覽器，指UC強制全屏。
3 禁止識別電話號碼和郵箱
<meta name="format-detection" content="telephone=no, email=no" />
禁止識別后，頁面當中所有的郵箱和電話將不會被識別,如果有特殊需求,要配合一下代碼實現
<a href="tel:110">請撥打電話110</a>
<a href="mailto:qq@.com">請發送郵件qq@.com</a>
4 消除鏈接、表單、按鈕默認背景
.box{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
對表單、鏈接、按鈕的默認背景設置成全透明，從而進行該樣式的消除。
5 消除按鈕圓角
.box{
-webkit-appearance: none;
}
在應用開發中，經常會遇到ios端和安卓端的樣式顯示不一樣，例如同一按鈕(樣式一樣)會顯示不一樣的顏色，導致項目整體的搭配不是很好。利用
-webkit-appearance: none，就可以去除瀏覽器默認樣式。
6 移動端字體
- ios系統
- 默認中文字體是Heiti SC
- 默認英文字體是Helvetica
- 默認數字字體是HelveticaNeue
- 無微軟雅黑字體
- android 系統
- 默認中文字體是Droidsansfallback
- 默認英文和數字字體是Droid Sans
- 無微軟雅黑字體
- winphone 系統
- 默認中文字體是Dengxian(方正等線體)
- 默認英文和數字字體是Segoe
- 無微軟雅黑字體
- 結論
- 各個手機系統有自己的默認字體，且都不支持微軟雅黑
- 如無特殊需求，手機端無需定義中文字體，使用系統默認
- 英文字體和數字字體可使用 Helvetica ，三種系統都支持
body{
font-family:Helvetica;
}
7 禁止用戶設置字體大小
.box{
-webkit-text-size-adjust:100%
}
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
解決手機橫屏時默認文字會放大的問題。當
text-size-adjust設為none或者100%時，則關閉字體大小自動調整功能。
8 禁止文字選中
.box{
-webkit-user-select:none /*安卓不支持*/
}
安卓上通過以下javascript代碼解決：
document.addEventListener("touchstart",function(e){e.preventDefault})
當你不希望用戶在你的網站上選擇文本時，一種方法是利用js來實現，另一中方法是將
-webkit-user-select和-moz-user-select的值設為none。
請謹慎使用這個屬性：因為大部分用戶是來查看信息的，他們可以復制并存儲下來以備將來之用，所以這種方法既無用也無效。如果你禁用了復制粘貼功能，用戶還是可以通過查看源文件來獲取到他們想要的內容。
9 字體增強 font boosting
移動端設備為了使用戶能看清楚大批量的字體，會自動對字體進行放，但是只要指定了容器的高度，就能解決。
p{
max-height:9999999px;
}
10 調用原生滾動事件
.box{
-webkit-overflow-scrolling:touch
}
使用具有回彈效果的滾動，當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。
該屬性的值也可以為
auto，表示使用普通滾動，當手指從觸摸屏上移開，滾動會立即停止。
11 CSS動畫頁面閃白,動畫卡頓
解決方法:
- 盡可能地使用合成屬性transform和opacity來設計CSS3動畫，不使用position的left和top來定位
- 使用 CSS3 動畫的時盡量利用3D加速，從而使得動畫變得流暢。動畫過程中的動畫閃白可以通過 backface-visibility 隱藏
.box{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
12 fixed定位缺陷
- ios下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位
- android下fixed表現要比iOS更好，軟鍵盤彈出時，不會影響fixed元素定位
- ios4下不支持position:fixed
解決方案： 可用iScroll.js插件解決這個問題
13 阻止旋轉屏幕時自動調整字體大小
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:none;
}
當
text-size-adjust設為none或者100%時，則關閉字體大小自動調整功能。
14 上下拉動滾動條時卡頓、慢
body {
-webkit-overflow-scrolling:touch; overflow-scrolling: touch;
}
Android3+和iOS5+支持CSS3的新屬性為overflow-scrolling
15 禁止復制、選中文本
.box{
-webkit-user-select:none;user-select:none;
}
解決移動設備可選中頁面文本(視產品需要而定)
16 ios和android下觸摸元素時出現半透明灰色遮罩
.box{
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
設置alpha值為0就可以去除半透明灰色遮罩，備注：transparent的屬性值在android下無效。
17 關于 iOS 與 OS X 端字體的優化(橫豎屏會出現字體加粗不一致等)
iOS 瀏覽器橫屏時會重置字體大小，設置 text-size-adjust 為 none 可以解決 iOS 上的問題，但桌面版 Safari 的字體縮放功能會失效，因此最佳方案是將 text-size-adjust 為 100% 。
.box{
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
