webkit webapp 開發(fā)技術(shù)要點(diǎn)總結(jié)

《webkit webapp 開發(fā)技術(shù)要點(diǎn)總結(jié)》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、webkitwebApp開發(fā)技術(shù)要點(diǎn)總結(jié)2013-09-0414:25佚名技術(shù)博客字號：T

2、T如果你是一名前端er,又想在移動設(shè)備上開發(fā)出自己的應(yīng)用，那怎么實(shí)現(xiàn)呢？幸好，webkit內(nèi)核的瀏覽器能幫助我們完成這一切。接觸webkitwebApp的開發(fā)已經(jīng)有一段時間了，現(xiàn)把一些技巧分享給大家：AD：2014WOT全球軟件技術(shù)峰會北京站課程視頻發(fā)布如果你是一名前端er,又想在移動設(shè)備上開發(fā)出自己的應(yīng)用，那怎么實(shí)現(xiàn)呢？幸好，webkit內(nèi)核的瀏覽器能幫助我們完成這一切。接觸webkitwebApp的開發(fā)已經(jīng)有一段時間了，現(xiàn)把一些技巧分享給大家：1.viewport：也就是可視區(qū)域。對于桌面

3、瀏覽器，我們都很清楚viewport是什么，就是出去了所有工具欄、狀態(tài)欄、滾動條等等之后用于看網(wǎng)頁的區(qū)域，這是真正有效的區(qū)域。由于移動設(shè)備屏幕寬度不同于傳統(tǒng)web,因此我們需要改變viewport;實(shí)際上我們可以操作的屬性有4個：1.width?-?????????????//??viewport?的寬度?（范圍從200?到10,000，默認(rèn)為980?像素）??2.height?-????????????//??viewport?的高度?（范圍從223?到10,000）??3.???4.initial-scale?-?????//??初始的縮放比例?（范圍從>0?到10）??5.??

4、?6.minimum-scale?-????//???允許用戶縮放到的最小比例??7.maximum-scale?-????//???允許用戶縮放到的最大比例??8.???9.user-scalable?-????//???用戶是否可以手動縮?(no,yes)??那么到底這些設(shè)置如何讓Safari知道？其實(shí)很簡單，就一個meta，形如：1.???//編碼??2.

5、idth=320;?initial-scale=1.0;maximum-scale=1.0;?user-scalable=no;"/>??3.??//?離線應(yīng)用的另一個技巧???????4.??//?隱藏狀態(tài)欄??????????1.

6、tus-bar-style"?/>?//指定的iphone中safari頂端的狀態(tài)條的樣式??????????2.???????//告訴設(shè)備忽略將頁面中的數(shù)字識別為電話號碼????????3.??在設(shè)置了initial-scale=1之后，我們終于可以以1:1的比例進(jìn)行頁面設(shè)計(jì)了。關(guān)于viewport，還有一個很重要的概念是：iphone的safari瀏覽器完全沒有滾動條，而且不是簡單的“隱藏滾動條”

7、，是根本沒有這個功能。iphone的safari瀏覽器實(shí)際上從一開始就完整顯示了這個網(wǎng)頁，然后用viewport查看其中的一部分。當(dāng)你用手指拖動時，其實(shí)拖的不是頁面，而是viewport。瀏覽器行為的改變不止是滾動條，交互事件也跟普通桌面不一樣。2.?link:1.?//?設(shè)置開始頁面圖片??2.?//?在設(shè)置書簽的時候可以顯示好看的圖標(biāo)??3.

8、nk?rel="stylesheet"?media="all?and?(orientation:portrait)"?href="portrait.css">????//?肖像模式樣式?????????4.