1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" >
（1）強制讓文檔與設(shè)備的寬度保持1：1；
（2）文檔最大的寬度比列是1.0（initial-scale初始刻度值和maximum-scale最大刻度值）；
（3）user-scalable定義是否可縮放（0為不縮放），使頁面固定設(shè)備上面的大小。
下圖分別是沒有定義viewport和定義viewport在手機上顯示的hello world網(wǎng)頁。
注意：實際測試中發(fā)現(xiàn)，HTC G7自身系統(tǒng)瀏覽器不支持這一條規(guī)則，能夠?qū)撁孢M行放大，一旦放大響應(yīng)的box也隨之放大，導(dǎo)致俄頁面出現(xiàn)錯亂問題，解決方法：定義頁面的最小寬度 min-width，body{min-width: 300px;}
2. <meta name="format-detection" content="telephone=no"/>
使設(shè)備瀏覽網(wǎng)頁時對數(shù)字不啟用電話功能（不同設(shè)備解釋不同，itouch點擊數(shù)字為存入聯(lián)系人，iphone為撥打電話），忽略將頁面中的數(shù)字識別為電話號碼。
若需要啟用電話功能將telephone=yes即可，具體調(diào)用格式可以這樣書寫代碼<a href=”13888888888”>Call Me</a>，若在頁面上面有g(shù)oogle maps, iTunes和youtube的鏈接會在ios設(shè)備上打開相應(yīng)的程序組件。
HTML5中增加了很多標(biāo)簽，例如：header、nav、footer等，可以實現(xiàn)更豐富的WEB應(yīng)用程序體驗，并且可以減少開發(fā)者的工作量。
目前，手機操作系統(tǒng)和瀏覽器對HTML5的支持還不是非常完善，在使用的時候需要仔細(xì)測試。
在手機版合同信息錄入系統(tǒng)中，用到了<input type=”tel”>,該標(biāo)簽與text輸入域差不多，但是在給該輸入域輸入內(nèi)容時，手機鍵盤為電話號碼鍵盤，如下圖所示。
CSS3中增加了許多新的特性，例如：圓角邊框、文字投影等等。目前各個主流瀏覽器對CSS3屬性的實現(xiàn)方式不太一樣，這就需要用到各種瀏覽器的前綴。比較常用的有：
-webkit-border-image 適用于webkit內(nèi)核的瀏覽器 safari google
-moz-border-image 適用于mozilla瀏覽器 firefox
如下圖所示，是iphone上比較常用的web app樣式。該網(wǎng)頁完全使用CSS3實現(xiàn)，并未使用任何圖片。
HTML
<body>
<header>
<div class="button bordered back">
<span class="pointer"></span>
<span>Back</span>
</div>
<h1>主菜單</h1>
</header>
</body>
CSS
<style type="text/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;
}
/* Bordered Button Styles */
.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;
}
/* End Bordered Button Styles */
/* Back Bordered Button Styles */
.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));
}
/* End Back Bordered Button Styles */
header > .button {
position: absolute;
right: 10px;
}
header > .button.back {
right: auto;
left: 10px;
}
</style>
請保證將每條數(shù)據(jù)都放在一個a標(biāo)簽中，為何這樣做？因為在觸控手機上，為提升用戶體驗，盡可能的保證用戶的可點擊區(qū)域較大。
在觸控手機上，為提升用戶體驗，應(yīng)盡可能保證用戶的可點擊區(qū)域較大。因此，盡量將每條數(shù)據(jù)都放在一個a標(biāo)簽中。如下圖所示，每個酒店的信息都放在一個a標(biāo)簽中，便于用戶點擊。
在編寫CSS時，盡量不要把容器（不管是外層容器還是內(nèi)層）的寬度定死。為達(dá)到適配各種手持設(shè)備，應(yīng)使用自適應(yīng)布局模式，這樣做可以讓你的頁面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能夠正常的顯示，無需再次考慮設(shè)備的分辨率。
聯(lián)系客服
