HTML5 移動(dòng)開(kāi)發(fā)入門(mén)知識(shí)點(diǎn)分享

1、html5 移動(dòng)開(kāi)發(fā)入門(mén)知識(shí)點(diǎn)分享1、先來(lái)看淘寶無(wú)線wiki要求在頁(yè)面中添加的meta標(biāo)簽。第一個(gè)meta標(biāo)簽表示：強(qiáng)制讓文檔的寬度與設(shè)備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點(diǎn)擊屏幕放大掃瞄；尤其要注重的是content里多個(gè)屬性的設(shè)置一定要用分號(hào)+空格來(lái)隔開(kāi)，假如不規(guī)范將不會(huì)起作用。其次個(gè)meta標(biāo)簽是iphone設(shè)備中的safari私有meta標(biāo)簽，它表示：允許全屏模式掃瞄；第三個(gè)meta標(biāo)簽也是iphone的私有標(biāo)簽，它指定的iphone中safari頂端的狀態(tài)條的樣式；另有default（白色），black-translucent（灰色半透亮）；第四個(gè)meta

2、標(biāo)簽表示：告知設(shè)備忽視將頁(yè)面中的數(shù)字識(shí)別為電話號(hào)碼;第五個(gè)meta標(biāo)簽表示：推斷頁(yè)面是否在本地native（本地app）環(huán)境中；2.放棄float用法display：inline-block屬性代替；由于float不適用于反向停泊和無(wú)法接受水平間隙；3.大膽用法html5和css3由于這些高端智能手機(jī)（iphone、android）的內(nèi)置掃瞄器都是基于webkit內(nèi)核的；4.用法自適應(yīng)模式布局apple webapp api已經(jīng)明確解釋了：我們?yōu)榱俗層脩粼趕afari中正常的掃瞄網(wǎng)頁(yè)，我們必需保證用戶的設(shè)備處于任何一個(gè)方位時(shí)，safari都能夠正常的顯示網(wǎng)頁(yè)內(nèi)容（也就是自適應(yīng)），所以我們禁止開(kāi)

3、發(fā)者阻擋掃瞄器的orientationchange大事；在android平臺(tái)，雖然沒(méi)有那個(gè)文檔解釋，的確也是無(wú)法阻擋此大事的。所以自用法布局模式非常須要，而且自適應(yīng)之后也不用考慮辨別率的問(wèn)題。5.學(xué)會(huì)用法webkit-box稱之為：流體盒模型，這是一種自適應(yīng)的解決計(jì)劃。比較常用的是前三個(gè)，固然還有display:-webkit-box;6.躲藏ios和android上輸入url的控件條你的老板或者pd或者交互設(shè)計(jì)師可能會(huì)要求你：能否讓我們的webapp越發(fā)像nativeapp，我不想讓用戶看見(jiàn)那個(gè)輸入url的控件條？答案是可以做到的。我們可以利用一句容易的javascript代碼來(lái)實(shí)現(xiàn)這個(gè)效果

4、->settimeout（function（） window.scrollto（0, 1）; ,0）;請(qǐng)注重，這句代碼必需放在window.onload里才干夠正常的工作，而且你的當(dāng)前文檔的內(nèi)容高度必需是高于窗口的高度時(shí)，這句代碼才干有效的執(zhí)行。7.如何檢測(cè)用戶是通過(guò)主屏啟動(dòng)你的webapp看過(guò)apple webapp api的學(xué)生都知道ios為safari提供了一個(gè)將當(dāng)前頁(yè)面添加主屏的功能，按下 iphoneipodipod touch底部工具中的小加號(hào)，或者ipad頂部左側(cè)的小加號(hào)，就可以將當(dāng)前的頁(yè)面添加到設(shè)備的主屏，在設(shè)備的主屏?xí)詣?dòng) 增強(qiáng)一個(gè)當(dāng)前頁(yè)面的啟動(dòng)圖標(biāo)，點(diǎn)擊該啟動(dòng)圖標(biāo)就可

5、以迅速、便捷的啟動(dòng)你的webapp。從主屏啟動(dòng)的webapp和掃瞄器拜訪你的webapp最大的區(qū)分 是它清除了掃瞄器上方和下方的工具條，這樣你的webapp就越發(fā)像是nativeapp了，還有一個(gè)區(qū)分是window對(duì)像中的navigator子對(duì) 象的一個(gè)standalone屬性。ios中掃瞄器挺直拜訪站點(diǎn)時(shí)，navigator.standalone為false,從主屏啟動(dòng)webapp 時(shí)，navigator.standalone為true， 我們可以通過(guò)navigator.standalone這個(gè)屬性獲知用戶當(dāng)前是否是從主屏訪 問(wèn)我們的webapp的。在android中從來(lái)沒(méi)有添加到主屏這回事

6、！8.如何關(guān)閉ios中鍵盤(pán)自動(dòng)大寫(xiě)我們知道在ios中，當(dāng)虛擬鍵盤(pán)彈出時(shí)，默認(rèn)狀況下鍵盤(pán)是開(kāi)啟首字母大寫(xiě)的功能的，按照某些業(yè)務(wù)場(chǎng)景，可能我們需要關(guān)閉這個(gè)功能，移動(dòng)版本webkit為 input元素提供了autocapitalize屬性，通過(guò)指定autocapitalize=off來(lái)關(guān)閉鍵盤(pán)默認(rèn)首字母大寫(xiě)。9.ios中如何徹底禁止用戶在新窗口打開(kāi)頁(yè)面有時(shí)我們可能需要禁止用戶在新窗口打開(kāi)頁(yè)面，我們可以用法a標(biāo)簽的target=_self來(lái)指定用戶在新窗口打開(kāi)，或者target屬性保持空，但 是你會(huì)發(fā)覺(jué)ios的用戶在這個(gè)鏈接的上方長(zhǎng)按3秒鐘后，ios會(huì)彈出一個(gè)列表按鈕，用戶通過(guò)這些按鈕仍然可以在新窗口

7、打開(kāi)頁(yè)面，這樣的話，開(kāi)發(fā)者指定的 target屬性就失效了，但是可以通過(guò)指定當(dāng)前元素的-webkit-touch-callout樣式屬性為none來(lái)禁止ios彈出這些按鈕。這個(gè)技 巧僅適用ios對(duì)于android平臺(tái)則無(wú)效。10.ios中如何禁止用戶保存復(fù)制我們?cè)诘?3條技巧中提到元素的-webkit-touch-callout屬性，同樣為一個(gè)img標(biāo)簽指定-webkit-touch-callout為none也會(huì)禁止設(shè)備彈出列表按鈕，這樣用戶就無(wú)法保存復(fù)制你的了。11.ios中如何禁止用戶選中文字我們通過(guò)指定文字標(biāo)簽的-webkit-user-select屬性為none便可以禁止ios用戶選中

8、文字。12.ios中如何獵取滾動(dòng)條的值桌面掃瞄器中想要獵取滾動(dòng)條的值是通過(guò)document.scrolltop和document.scrollleft得到的，但在ios中你會(huì)發(fā)覺(jué)這兩？個(gè)屬性是未定義的，為什么呢？由于在ios中沒(méi)有滾動(dòng)條的概念，在android中通過(guò)這兩個(gè)屬性可以正常獵取到滾動(dòng)條的值，那么在ios中我們?cè)撊绾潍@？取滾動(dòng)條的值呢？通過(guò)window.scrolly和window.scrollx我們可以得到當(dāng)前窗口的y軸和x軸滾動(dòng)條的值。13.如何解決盒子邊框溢出當(dāng)你指定了一個(gè)塊級(jí)元素時(shí)，并且為其定義了邊框，設(shè)置了其寬度為100。在移動(dòng)設(shè)備開(kāi)發(fā)過(guò)程中我們通常會(huì)對(duì)文本框定義為寬度100

9、，將其定義為塊級(jí)元？素以實(shí)現(xiàn)全屏自適應(yīng)的樣式，但此時(shí)你會(huì)發(fā)覺(jué)，該元素的邊框（左右）各1個(gè)像素會(huì)溢了文檔，導(dǎo)致浮現(xiàn)橫向滾動(dòng)條，為解決這一問(wèn)題，我們可以為其添加一個(gè)特別？的樣式-webkit-box-sizing:border-box;用來(lái)指定該盒子的大包裹括邊框的寬度。14.如何解決android?2.0以下平臺(tái)中圓角的問(wèn)題假如大家夠精心的話，在做wap站點(diǎn)開(kāi)發(fā)時(shí)，大家應(yīng)當(dāng)會(huì)發(fā)覺(jué)android?2.0以下的平臺(tái)中問(wèn)題特殊的多，比如說(shuō)邊框圓角這個(gè)問(wèn)題吧。在對(duì)一個(gè)元素定義圓角時(shí)，為徹低兼容android?2.0以下的平臺(tái)，我們必需要根據(jù)以下技巧來(lái)定義邊框圓角：1-webkit這個(gè)前綴必需要加上（在i

10、os中，你可以不加，但android中一定要加）；2假如對(duì)針對(duì)邊框做樣式定義，比如border:1px?solid?000;那么-webkit-border-radius這屬性必需要浮現(xiàn)在border屬性后。3如果我們有這樣的視覺(jué)元素，左上角和右上角是圓角時(shí)，我們必需要先定義全局的（4個(gè)角的圓角值）-webkit-border-?radius:5px;然后再依次的籠罩左下角和右下角，-webkit-border-bottom-left-radius:0;-webkit-?border-bottom-right-border:0;否則在android?2.0以下的平臺(tái)中將所有顯示直角，還有記??！

11、-webkit這個(gè)前？綴一定要加上！15.如何解決ios 4.3版本中safari對(duì)頁(yè)面中5位數(shù)字的自動(dòng)識(shí)別和自動(dòng)添加樣式新的ios系統(tǒng)也就是4.3版本，升級(jí)后對(duì)safari造成了一個(gè)bug：即使你添加了如下的meta標(biāo)簽，safari仍然會(huì)對(duì)頁(yè)面中的5位延續(xù)的數(shù)字舉行自動(dòng)識(shí)別，并且將其重新渲染樣式，也就是說(shuō)你的css對(duì)該標(biāo)簽是無(wú)效的。我們可以用一個(gè)比較齷齪的方法來(lái)解決。比如說(shuō)支付寶wap站點(diǎn)中顯示金額的標(biāo)簽，我們都做了如下改寫(xiě)：95009.00元 .16.新增大事touch大事替代了pc端的mouse大事，需要注重的就是touchmove!=mousemove,應(yīng)當(dāng)是touchmove=mousemove+mousedown;17.link18.屏幕旋轉(zhuǎn)大事19.雙手滑動(dòng)大事20.推斷是否為iphone