。設(shè)置width=device-width后就不會(huì)再進(jìn)行縮放了
，因?yàn)閷挾日煤蚼obile的寬度相同（前提是沒(méi)有設(shè)置縮放比例）。 minimum-scale和maximum-scale是控制用戶允許設(shè)置的縮放比例的
。user-scalable標(biāo)識(shí)是否允許對(duì)頁(yè)面進(jìn)行縮放，取值有兩個(gè)yes和no
。設(shè)置為no則不允許進(jìn)行頁(yè)面縮放了
。initial-scale設(shè)置 用戶最初看到頁(yè)面時(shí)的縮放比例。 我們可以直接在html頁(yè)面設(shè)置好
，也可以通過(guò)JavaScript來(lái)設(shè)置
，Tangram Mobile實(shí)現(xiàn)了相應(yīng)的設(shè)置方法，
baidu.page.setNoScale 設(shè)置頁(yè)面默認(rèn)不縮放，并且不可縮放設(shè)置media
我們可以利用link標(biāo)簽的media屬性來(lái)限制CSS的應(yīng)用范圍，通過(guò)max-device-width：480px 屏蔽PC；通過(guò)only screen屏蔽屏幕閱讀設(shè)備； 通過(guò)orientation: portrait來(lái)區(qū)分橫屏豎屏，
@media all and (min-width:500px) { … } @media (min-width:500px) { … } @media (orientation: portrait) { … }
@media all and (orientation: portrait) { … } @media screen and (min-width: 400px) and (max-width: 700px) { … }
設(shè)置網(wǎng)頁(yè)的桌面快捷方式圖標(biāo)
在iphone、itouch和ipad上，用戶可以為網(wǎng)頁(yè)設(shè)置桌面快捷方式，系統(tǒng)會(huì)自動(dòng)截圖為網(wǎng)頁(yè)快捷方式生成一個(gè)圖標(biāo)，但是截圖一般都不太好看， 我們可以事先為網(wǎng)頁(yè)設(shè)置好快捷方式圖標(biāo)，這樣系統(tǒng)會(huì)自動(dòng)使用這個(gè)圖標(biāo)。我們可以這樣設(shè)置，
<link rel="apple-touch-icon" href="apple-touch-icon.png"/> <link rel="apple-touch-startup-image" href="startup.png"/>
第一行就是設(shè)置桌面快捷方式圖標(biāo)的，圖標(biāo)必須是57*57像素的文件，不需要網(wǎng)頁(yè)設(shè)計(jì)師做圓角和高亮效果，系統(tǒng)會(huì)自動(dòng)幫你搞定這個(gè) 放在網(wǎng)頁(yè)根目錄會(huì)作用于下面的全部網(wǎng)頁(yè)，當(dāng)然也可以為每個(gè)頁(yè)面設(shè)置單獨(dú)的圖標(biāo)。第二行是設(shè)置啟動(dòng)畫(huà)面。我們也可以采用 Tangram Mobile的方法來(lái)設(shè)置，
baidu.page.setWebApp
隱藏地址欄
很多文檔介紹通過(guò)調(diào)用
window.scrollTo(0, 1);
就可以隱藏地址欄，但是通過(guò)實(shí)踐發(fā)現(xiàn)隱藏地址欄還是真夠坑爹的啊，只調(diào)用這一句話一般不會(huì)起作用
，我們需要
function hideBar() { setTimeout( function() { window.scrollTo(0, 1); }, 0); }; 但是有時(shí)候我們發(fā)現(xiàn)還是隱藏不了地址欄，為什么呢？大多時(shí)候是因?yàn)轫?yè)面高度不夠隱藏地址欄
，這樣我們需要先 把body高度設(shè)置夠搞，隱藏地址欄后再還原回來(lái)
，
function hideBar() { document.body.style.height = Math.max(windows.innerHeight, windows.innerWidth) * 2 +
'px'; setTimeout( function() { window.scrollTo(0, 1); setTimeout( function() { document.body.style.height = windows.innerHeight + 'px'; }, 200); }, 0); };
好了這回終于可以隱藏地址欄了，但是我們又發(fā)現(xiàn)獲取的innerHeight是隱藏地址欄之前的數(shù)值， 怎么辦呢
，嗯
，看來(lái)還需要一個(gè)回調(diào)函數(shù)，這樣我們的方法又變成
，
function hideBar(fn) { document.body.style.height = Math.max(windows.innerHeight, windows.innerWidth) * 2 + 'px'; setTimeout( function()
{ window.scrollTo(0, 1); setTimeout( function() { document.body.style.height = windows.innerHeight + 'px'; fn && fn(); },
200); }, 0); };
在實(shí)際應(yīng)用的時(shí)候會(huì)發(fā)現(xiàn)有些機(jī)器反應(yīng)比較慢，這樣setTimeout的時(shí)間也可以加長(zhǎng)些，唉，隱藏個(gè)地址欄竟然也這么麻煩， Tangram Mobile中已經(jīng)實(shí)現(xiàn)了hideBar方法，還是建議大家直接使用baidu.page.hideBar吧。 有些時(shí)候需要判斷當(dāng)前是否已經(jīng)隱藏了地址欄，可以使用window.pageYOffset來(lái)判斷。
獲取設(shè)備翻轉(zhuǎn)狀態(tài)
我們可以通過(guò)獲取orientation的值來(lái)判斷翻轉(zhuǎn)狀態(tài)，那如果設(shè)備不支持orientation怎么樣，那我們可以通過(guò) innerWidth和innerHeight的比例來(lái)判斷翻轉(zhuǎn)狀態(tài)，代碼如下（取自Tangram Mobile的getOrientation），
baidu.page.getOrientation = function() { if ("onorientationchange" in window)
{ return (window.orientation == 0 || window.orientation == 180) ? 'portrait' : 'landscape'; }
else { return (windows.innerHeight > windows.innerWidth) ? 'portrait' : 'landscape'; } };
position:fixed
在pc上網(wǎng)站建設(shè)經(jīng)常使用position:fixed，在iphone上似乎并不管用，官方給了很多解釋?zhuān)撬€是不好使，這樣我們只能自己來(lái) 實(shí)現(xiàn)這種效果，首先我們需要一個(gè)setPosition方法，
function setPosition(top, left){ //根據(jù)top、left把元素設(shè)置到視圖區(qū)相應(yīng)位置 }
然后，我們需要注冊(cè)scroll事件和onrientation事件
element.addEventListener('scroll', setPosition); element.addEventListener('onrientationchange', setPosition);具體代碼可以參考Tangram Mobile的Toolbar組件
overflow:scroll
在iphone上開(kāi)發(fā)web程序，overflow:scroll十分讓人頭疼
，因?yàn)閕phone并不支持，官方依然給了很多解釋?zhuān)覀冞€是需要自己來(lái)實(shí)現(xiàn)
， 因?yàn)椴恢С謔verflow:scroll
，我們只能設(shè)置為overflow:hidden
，然后在內(nèi)容上注冊(cè)scroll和touch事件，當(dāng)touch事件被觸發(fā)的時(shí)候
， 把隱藏的內(nèi)容顯示出來(lái)
。這個(gè)功能比較復(fù)雜，我們可以使用Tangram Mobile的Scroller組件
。
注：ios5已經(jīng)解決了position:fixed和overflow:scroll的問(wèn)題
網(wǎng)站建設(shè) 網(wǎng)站制作 網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)站建設(shè)公司 沈陽(yáng)網(wǎng)站建設(shè) 沈陽(yáng)網(wǎng)頁(yè)設(shè)計(jì) 高端網(wǎng)站設(shè)計(jì) 沈陽(yáng)網(wǎng)站制作公司 高端網(wǎng)站建設(shè) 沈陽(yáng)網(wǎng)絡(luò)公司 沈陽(yáng)網(wǎng)站制作
沈陽(yáng)易勢(shì)科技有限公司 © 2006-2013 , All rights reserved. 遼B2-20150173-8
