移動端web開發

 

跨終端/響應式頁面不外乎是讓各類分辨率的屏幕都能順利閱讀你的頁面，常規來說一個跨終端頁面，在寬屏的電腦上看和在小屏幕手機上看的佈局是不一樣的，佈局不一樣的緣由是爲了讓讀者更好地閱讀你的頁面，見下圖：

這裏有點要提到的是，咱們常規會將PC版的頁面和移動端設備的頁面獨立開來設計，這樣會讓PC端的頁面佈局更靈活和好維護。若是你但願你的頁面能適配包括PC端在內的任何設備，那麼下面幾個小工具能夠方便你顧及舊版本IE所存在的困擾：

⑴ IE8-不能識別HTML5的<hearder>、<article>、<footer>、<figure>等標籤，能夠經過 html5.js 來解決：

<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> 

而後將下面代碼寫入你的base.css來格式化html5標籤：

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

⑵ IE8-不支持CSS3 media queries，即不支持"@media only screen"語法，能夠經過 css3-mediaqueries.js 來解決：

<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->

本文僅談論移動端的頁面適配方式，不考慮PC屏幕環境，不過原理均是相通的。本文也不討論SPA/OPA的實現。

（一）百分比賦值

相信許多剛接觸響應式頁面設計的朋友，第一時間考慮到的就是將layout數值設爲百分值形式，包括width、height、padding、margin等大小、偏移、方位的賦值。 例如：

  View Code

 常規來講咱們會用固定值或者自動值來設置容器的高度，一旦咱們想要使用百分比來設置元素高度時，咱們可能會這麼寫：

  View Code

但在運行代碼後，你會發現該高度樣式並無生效。解決這個問題的方法很簡單，給外層元素"bady,html"添加一個 height:100% 的樣式便可，具體原理能夠查閱個人舊文章CSS百分比定義高度的冷知識 。

VIEWPORT介紹

這裏先打斷一下文章，簡單介紹下「viewport」，作移動端頁面開發的朋友必須瞭解viewport。
咱們在使用移動端設備瀏覽網頁時，移動端瀏覽器是直接把整個頁面放到一個虛擬的視圖裏來顯示的，一般來講這個虛擬的視圖大小會比手機屏幕大，用戶能夠經過手勢操做來平移、縮放這個視圖。

爲了方便理解，咱們假設有這麼一個頁面：

① 若是沒有viewport這種東西，在移動端瀏覽器上訪問該頁面多是這樣的：

 

② 有了viewport後是這樣的：

viewport誕生的初衷是爲了讓移動端更人性化地瀏覽PC端頁面，但它也帶來了一些問題，從而催生了相似iscroll.js的工具。

想了解更多關於viewport的知識請點這裏。

（二）禁用移動端設備的部分特性（非必要，按需使用）

⑴ 禁用viewport縮放功能

在頁面頭部加上以下語句來禁用viewport的縮放特性（響應式頁面基本是按百分比來佈局和適配的，用戶縮放頁面反而影響閱讀效果）：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

如上咱們設置viewport初始化時便適配設備瀏覽器的寬度，且沒法縮放，該meta標籤具體參數以下：
width：viewport 的寬度，能夠指定一個固定值，如650；或者能夠是device-width，表示設備的寬度。
height：和 width 相對應，可指定高度。
initial-scale：頁面初始縮放比例(0-1)
maximum-scale：容許用戶縮放到的最大比例(0-1)
minimum-scale：容許用戶縮放到的最小比例(0-1)
user-scalable：用戶是否能夠手動縮放（yes/no）

 

上述meta標籤可能會在舊版的iphone中致使佈局錯誤的問題，由於舊版的iphone會默認把頁面作980寬度渲染，但最終以320寬度顯示，咱們能夠再接着加一句meta標籤來兼容（讓iphone以320的寬度來渲染頁面）：

<meta name="MobileOptimized" content="320">

⑵ 禁用Webkit文本調節功能
不管是移動端仍是PC端，webkit內核的瀏覽器會自動調節文字大小。例如Chrome不會顯示小於12px的字號效果，即便你設置 font-size:10px，頁面也將渲染爲12px的大小。
另外移動設備在縱向模式和橫向模式查閱頁面時，文本的大小也會被瀏覽器調節：

禁用該功能的途徑是使用-webkit-text-size-adjust 來設置（chrome28+已失效）：

body {
    -webkit-text-size-adjust: 100%;
}

（三）CSS3 media queries

CSS3 media queries（後簡稱爲CMQ）算是響應式頁面設計的一把瑞士軍刀，能夠把你的頁面在不一樣分辨率的環境下雕琢成對應的、最好看的輪廓，掌握了CMQ也算是掌握了響應式頁面設計的基礎。
CMQ在樣式文件中的使用很簡單，其語法爲

@media only screen and (max/min-width/height: 960px) {
  /* 樣式定義 */
}

其中橙色高亮的 「only screen」 參數表示限定當訪問環境（媒體類型）爲彩色屏幕設備時才生效。

該參數可選值爲 all | aural | braille | handheld | print | projection | screen | tty | tv |embossed

除非該參數數值爲all，不然能夠在前面加個only限定類型。對於移動端和PC端，咱們只需設爲 "screen" 或 "only screen" 便可，建議使用後者，其語義更爲嚴謹。

另外一個高亮的參數 「max/min - width/height」 表示當屏幕的寬度/高度超過或者小於某個值時則生效，具體能夠看下面的示例：

⑴ Max Width

@media only screen and (max-width:500px){
  .outDiv {
      margin: 0 auto;
      width: 85%;
      height: 50%;
      background: red;
  }
}

該代碼段表示只有當屏幕寬度小於500px時才生效。

 

⑵ Min Width

@media only screen and (min-width:500px){
  .outDiv {
      margin: 0 auto;
      width: 85%;
      height: 50%;
      background: red;
  }
}

 該代碼段表示只有當屏幕寬度大於500px時才生效。

 

⑶ Max/Min Height

同 max/min-width ，表示當屏幕高度小於/大於設定值時樣式才生效。常規來講，咱們使用 max/min-width 比較多，而不多使用 max/min-height 。

 

⑷ Multiple Media Queries

有時候咱們須要定義樣式是在某個分辨率區間（好比500px-900px）才生效，這時候咱們能夠疊加使用 max/min-width/height 。
方法很簡單，加多一個「and」便可：

@media only screen  and (mix-width:500px) and (max-width:900px){
  .outDiv {
      margin: 0 auto;
      width: 85%;
      height: 50%;
      background: red;
  }
}

 

⑸ Device Width

咱們上述的 max/min-width/height 均是針對可視區域分辨率的，若是但願針對設備的實際寬度來適配，咱們能夠利用 max-device-width 來實現：

@media only screen and (max-device-width:900px){
  .outDiv {
      margin: 0 auto;
      width: 85%;
      height: 50%;
      background: red;
  }
}

該代碼段表示當設備屏幕寬度小於900px時，其內部定義的樣式生效。打個比方，若是瀏覽器打開了一個小窗口（非全屏顯示），該窗口的寬度對該段代碼沒有任何影響。
只要你的電腦屏幕寬度是大於900px的（你應該不會使用分辨率過低的PC屏幕吧？），上面這段代碼就不會生效。

 

⑹ 標籤化的CMQ

CMQ不只僅能夠寫在樣式文件中，也能夠標籤化，直接寫在頁面<head>標籤內，其寫法以下：

<link rel="stylesheet" media="only screen and (max-width: 800px)" href="small_screen.css" />

該代碼表示在視圖寬度小於800px時則引入small_screen.css這個外部樣式文件。

另外你還能夠利用orientation來判斷設備的方向（垂直模式portrait/橫向模式landscape）：

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">　

但常規咱們並不推薦使用orientation，由於它沒法告知你關於設備分辨率的任何信息，因此做爲一個通用的規則，應該避免orientation而使用device-width代替。

（四）例子

咱們來作一個小例子，讓它能按下圖要求，在三個分辨率區間作不一樣的適配佈局：

先寫原型框架：

  View Code

接着利用CMQ，依照三種分別率區間來定義樣式：

  View Code

這裏須要提醒的一點是，咱們對於文本字體大小的定義建議使用 em 來賦值，畢竟不一樣終端不一樣瀏覽器會依據分辨率大小來設定文本的缺省大小，從而方便用戶閱讀，利用 em 來按比例調整字體大小能迎合終端瀏覽器的這我的性化特色。

共勉~