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