資源描述:
《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.