移動端頁面開發的一些常用的設置
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>
移動端頁面開發的一些常用的設置