HTML5 移動開發(fā)入門知識點分享

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

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

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

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

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

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

7、打開頁面，這樣的話，開發(fā)者指定的 target屬性就失效了，但是可以通過指定當前元素的-webkit-touch-callout樣式屬性為none來禁止ios彈出這些按鈕。這個技 巧僅適用ios對于android平臺則無效。10.ios中如何禁止用戶保存復制我們在第13條技巧中提到元素的-webkit-touch-callout屬性，同樣為一個img標簽指定-webkit-touch-callout為none也會禁止設備彈出列表按鈕，這樣用戶就無法保存復制你的了。11.ios中如何禁止用戶選中文字我們通過指定文字標簽的-webkit-user-select屬性為none便可以禁止ios用戶選中

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

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

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

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