移動端頁面開發的一些常用的設置
viewport 視口(可視區窗口)設置詳解
當我們試圖在iPhone中輸出屏幕寬度的時候，會發現屏幕寬度是980，居然和pc屏幕寬度差不多大
蘋果主導的這些手機廠商，為了使用戶獲得完整的WEB體驗，很多設備都會欺騙瀏覽器返回一個數值較大的視口，告訴瀏覽器，別以為我身子小，但是我想以980px寬度顯示這個頁面（分辨率和視口沒有關系（開發中根據視口來算的））
視口對於我們實現響應式是很不方便的。980太大了，不符合我們心中的期待，我們心中認為手機屏幕尺寸應該在320到400之間
默認不設置viewport一般可視區寬度在移動端是980，所有的手機響應式網站，都要加上meta viewport視口約束標記
解決這個問題只要約束視口即可：
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" />
一個id和name為 viewport的meta元標記，就表示現在要約束視口了
那麽具體約束的規則寫在content中，每個約束規則用逗號隔開：
width=device-width 命令視口的寬度，變為設備的寬（以1024*768屏幕為標準 iPhone等手機通常為320到380之間），(number||device-width)
initial-scale=1.0 命令視口默認的縮放等級為1（可以設置為任何數字，以倍數計算，IOS10沒效果）
minimum-scale=1.0 命令視口最小縮放等級為1（可以設置為任何數字，以倍數計算，IOS10沒效果）
maximum-scale=1.0 命令視口最大縮放等級為1（可以設置為任何數字，以倍數計算，IOS10沒效果）
user-scalable=no 不允許用戶縮放頁面(yes||no)（可以設置為任何數字，以倍數計算，IOS10沒效果）
其他的一些設置
強制橫屏或者豎屏設置（X5內核的瀏覽器才支持）
可以設置為protrait（豎屏）和andscape（橫屏）
<meta name="x5-orientation" content="portrait" />
設置全屏（X5內核有效）
<meta name="x5-fullscreen" content="true" />
UC瀏覽器強制豎屏或者橫屏顯示
可以設置為protrait（豎屏）和andscape（橫屏）
<meta name="screen-orientation" content="portrait">
UC全屏顯示
<meta name="full-screen" content="yes">
其他瀏覽器下如果要屏蔽橫屏顯示的功能，可以使用陀螺儀的方法來做，具體查看：移動端頁面的陀螺儀操作這篇文章
<meta name="format-detection" content="telephone=no, email=no" />
禁止移動端電話號碼和郵箱的識別
<meta name="format-detection" content="telephone=no, email=no" />
上面的設置是全局設置，如果說頁面中有 一個地方需要識別電話號碼和郵箱那麽可以使用下面這樣設置
<a href="tel:18888888888">請撥打電話18888888888</a> <a href="mailto:[email protected]">請發送郵件</a>
移動端頁面開發常見的一些問題（開發之前需要先重置以下樣式）
清除input，a，button等標簽的點擊陰影
在移動端input，a，button這三個標簽點擊的時候都會默認有陰影，那麽怎麽去掉或者替換其他的陰影樣式呢，可以使用下面這個屬性進行設置（下面是去除陰影）
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
<style> a, input, button{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } </style> <body> <a href="http://miaov.com">妙味課堂-我是莫濤</a> <input type="button" value="按鈕"> </body>
清除按鈕的圓角
在移動端input和button這兩個標簽都會默認有圓角，可以使用下面兩個樣式去除
input, button { -webkit-appearance: none; border-radius: 0; }
<style> a, input, button{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } input, button { -webkit-appearance: none; border-radius: 0; } </style> <body> <a href="http://miaov.com">妙味課堂-我是莫濤</a> <input type="button" value="按鈕"> </body>
選中文字設置（設置為不選中）
安卓不兼容這個屬性，可以使用事件來兼容
-webkit-user-select: none;
禁止文字縮放
-webkit-text-size-adjust: 100%;
默認字體設置
因為移動端，每個手機默認的字體都不一樣，所以需要重置一下，至於重置什麽樣的字體自己來定
font-family: Helvetica;
Font Boosting
在一段文字我們沒有給他設置高度的時候，在webkit內核下，文字的大小被瀏覽器放大了，解決辦法:設置高度或者設置最大高度max-hieght
固定定位在移動端的問題
移動端IOS回彈的問題
IOS下overflow的問題
就是是說body下某個元素超過頁面寬度後，即使body設置了overflow為hideen，在IOS下也沒有用，解決辦法就是將body下的所有子元素包裹在一個div上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no"> <title>Document</title> <style type="text/css"> html { height: 100%; overflow: hidden; } body { height: 100%; margin: 0; overflow: hidden; position: relative; } .wrap { height: 100%; overflow: auto; } header { position: absolute; width: 200%; height: 40px; background: rgba(0, 0, 0, .5); color: #fff; text-align: center; } section { padding-top: 40px; } </style> </head> <body> <div class="wrap"> <header>我是一個頭部</header> <section> 頁面內容<br/> </section> </div> </body> </html>
移動端頁面開發的一些常用的設置