[轉]部分手機網站前端設計經驗

原文連接：http://blog.sina.com.cn/s/blog_5b1de7d60101fby5.html

1.

（1）強制讓文檔與設備的寬度保持1：1；

（2）文檔最大的寬度比列是1.0（initial-scale初始刻度值和maximum-scale最大刻度值）；

（3）user-scalable定義是否可縮放（0爲不縮放），使頁面固定設備上面的大小。

下圖分別是沒有定義viewport和定義viewport在手機上顯示的hello world網頁。

  

注意：實際測試中發現，HTC G7自身系統瀏覽器不支持這一條規則，可以對頁面進行放大，一旦放大響應的box也隨之放大，致使俄頁面出現錯亂問題，解決方法：定義頁面的最小寬度 min-width，body{min-width: 300px;}

2.

使設備瀏覽網頁時對數字不啓用電話功能（不一樣設備解釋不一樣，itouch點擊數字爲存入聯繫人，iphone爲撥打電話），忽略將頁面中的數字識別爲電話號碼。

若須要啓用電話功能將telephone=yes便可，具體調用格式能夠這樣書寫代碼Call Me，若在頁面上面有google maps, iTunes和youtube的連接會在ios設備上打開相應的程序組件。

HTML5標籤的使用

HTML5中增長了不少標籤，例如：header、nav、footer等，能夠實現更豐富的WEB應用程序體驗，而且能夠減小開發者的工做量。

目前，手機操做系統和瀏覽器對HTML5的支持還不是很是完善，在使用的時候須要仔細測試。

在手機版合同信息錄入系統中，用到了,該標籤與text輸入域差很少，可是在給該輸入域輸入內容時，手機鍵盤爲電話號碼鍵盤，以下圖所示。

 

利用CSS3邊框背景屬性

CSS3中增長了許多新的特性，例如：圓角邊框、文字投影等等。目前各個主流瀏覽器對CSS3屬性的實現方式不太同樣，這就須要用到各類瀏覽器的前綴。比較經常使用的有：

-webkit-border-image    適用於webkit內核的瀏覽器  safari  google

-moz-border-image       適用於mozilla瀏覽器 firefox

以下圖所示，是iphone上比較經常使用的web app樣式。該網頁徹底使用CSS3實現，並未使用任何圖片。

 

HTML

 

     

  

       

       

        Back

   

       

主菜單

  

 

CSS

 

           html, body {

                  padding: 0px;

                  margin: 0px;

                  width: 100%

                  height: 100%;

           }

           body {

                  background: #cbd2d8;

                  background-image:

                         -webkit-gradient(linear, left top, right top,

                                from(#c5ccd4),

                                color-stop(0.75, #c5ccd4),

                                color-stop(0.75, transparent),

                                to(transparent));

                  -webkit-background-size: 5px 100%;

                  background-size: 5px 100%;

                  font: normal 16px/22px Helvetica, Arial, Sans-serif;

                  -webkit-text-size-adjust: 100%;

           }

           header { display: block; }

          

           header, .button {

                  -webkit-touch-callout: none;

              -webkit-user-select: none;

           }

           header {

                  position: relative;

                  width: 100%;

                  display: -webkit-box;

                  -webkit-box-orient: horizontal;

                  -webkit-box-pack:justify;

                  -webkit-box-sizing: border-box;

                  height: 45px;

                  padding: 6px 10px;

                  background-image:

                         -webkit-gradient(linear, left top, left bottom,

                                from(#b2bbca),

                                color-stop(0.25, #a7b0c3),

                                color-stop(0.5, #909cb3),

                                color-stop(0.5, #8593ac),

                                color-stop(0.75, #7c8ba5),

                                to(#73839f));

                  border-top: 1px solid #cdd5df;

                  border-bottom: 1px solid #2d3642;

           }

           header > h1 {

                  -webkit-box-flex: 1;

                  text-align: center;

                  margin: 0px;

                  font: bold 20px/32px  Helvetica, Sans-serif;

                  letter-spacing: -1px;

                       text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);

                       color: #fff;

                }           

          

           .button.bordered {

                  -webkit-box-shadow: 0 1px 1px #9aa5bb, 0 -1px 1px #8e96a5;

                  border: solid 1px #54617d;

                  border-color: #484e59 #54617d #4c5c7a #54617d;

                  display: inline-block;

                  cursor: pointer;

                  padding: 0px 10px;

                  font-size: 12px;

                  line-height: 28px;

                  height: 30px;

                  margin-top: 1px;

                  -webkit-box-sizing: border-box;

                  -webkit-border-radius: 5px;

                  background-image:

                         -webkit-gradient(linear, left top, left bottom,

                                from(#92a1bf),

                                color-stop(0.25, #798aad),

                                color-stop(0.5, #6276a0),

                                color-stop(0.5, #556a97),

                                color-stop(0.75, #566c98),

                                to(#546993));

                  color: #fff;

                  -webkit-tap-highlight-color: transparent;

                  -webkit-user-select: none;

           }

          

           .button.bordered:hover, .button.bordered.hover {

                  background-image:

                         -webkit-gradient(linear, left top, left bottom,

                                from(#7d88a5),

                                color-stop(0.25, #58698c),

                                color-stop(0.5, #3a4e78),

                                color-stop(0.5, #253c6a),

                                color-stop(0.75, #273f6d),

                                to(#273f6d));

                  -webkit-tap-highlight-color: transparent;

           }

          

          

           .button.bordered.back {

                  padding: 0px 10px 0px 3px;

                  margin-left: 10px;

                  position: relative;

           }

           .button.bordered.back > span {

                  position: relative;

                  z-index: 1;

           }

           .button.bordered.back > span.pointer {

                  z-index: 0;

                  background-image:

                         -webkit-gradient(linear, left top, right bottom,

                                from(#92a1bf),

                                color-stop(0.3, #798aad),

                                color-stop(0.51, #6276a0),

                                color-stop(0.51, #556a97),

                                color-stop(0.75, #566c98),

                                to(#546993));

                  border-left: solid 1px #484e59;

                  border-bottom: solid 1px #9aa5bb;

                  -webkit-border-top-left-radius: 5px;

                  -webkit-border-bottom-right-radius: 5px;

                  -webkit-border-bottom-left-radius: 4px;

                  height: 23.5px;

                  width: 23.5px;

                  display: inline-block;

                  -webkit-transform: rotate(45deg);

                  -webkit-mask-image:

                         -webkit-gradient(linear, left bottom, right top,

                                from(#000000),

                                color-stop(0.5,#000000),

                                color-stop(0.5, transparent),

                                to(transparent));

                  position: absolute;

                  left: -9px;

                  top: 2.5px;

                  -webkit-background-clip: content;

           }

           .button.bordered.back:hover > span.pointer, .button.back.hover > span.pointer {

                  background-image:

                         -webkit-gradient(linear, left top, right bottom,

                                from(#7d88a5),

                                color-stop(0.3, #58698c),

                                color-stop(0.51, #3a4e78),

                                color-stop(0.51, #253c6a),

                                color-stop(0.75, #273f6d),

                                to(#273f6d));

           }

          

           header > .button {

                  position: absolute;

                  right: 10px;

           }

           header > .button.back {

                  right: auto;

                  left: 10px;

           }                         

   

塊級化a標籤

請保證將每條數據都放在一個a標籤中，爲什麼這樣作？由於在觸控手機上，爲提高用戶體驗，儘量的保證用戶的可點擊區域較大。

在觸控手機上，爲提高用戶體驗，應儘量保證用戶的可點擊區域較大。所以，儘可能將每條數據都放在一個a標籤中。以下圖所示，每一個酒店的信息都放在一個a標籤中，便於用戶點擊。

 

自適應佈局模式

在編寫CSS時，儘可能不要把容器（無論是外層容器仍是內層）的寬度定死。爲達到適配各類手持設備，應使用自適應佈局模式，這樣作可讓你的頁面在ipad、itouch、ipod、iphone、android、web safarik、chrome都可以正常的顯示，無需再次考慮設備的分辨率。