2010-05-05 29 views
7

我在這個問題上看到過類似的問題,但它們與本地應用有關。 我爲在瀏覽器(Safari)中運行的iPhone/iPad構建Web應用程序。是否有可能阻止iPhone/iPad在瀏覽器中的方向改變?

我想知道是否有辦法阻止瀏覽器中的方向更改,也許是通過某個元標記。 我知道視口元標記,它允許您指定比例和縮放功能,所以想象也許有類似的方向。

我懷疑這是可能的,但我想我只是在這裏彈出一個問題來看。

+0

http://stackoverflow.com/questions/1207008/how-do-i-lock-the-orientation-to-portrait-mode-in-a-iphone-web-application/21641809#21641809 – TMan 2014-02-08 04:20:05

回答

3

這似乎並不能夠防止取向的變化,但是你可以用上面提到的代碼檢測到它。

如果您想阻止方向更改,則看起來好像您需要使用WebKit構建原生應用程序來清除事件。

5

是的,你可以。

的Javascript:

/*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode*/ 
window.onorientationchange = function() { 
var orientation = window.orientation; 

switch(orientation) { 
    case 0: 
     //Portrait mode 
    case 90: 
     // Landscape left 
    case -90: 
     //Landscape right 
} 

它的地方寫在iPhone文檔,但我找不到它:)。

UPDATE
Here from iPhone docs

+1

謝謝medopal,但我已經知道它可以被檢測到。我的問題是它可以防止的天氣。 – BoomShaka 2010-05-20 13:26:12

0

爲什麼你不能只是把event.preventDefault()裏面的函數?

1

你可能是真正棘手和旋轉網站的身體對抗的方向變化,如果沒有別的辦法......

0

你不能阻止它,但你可以改變身體的方向,根據iPad的方向。

使用medopal's Answer來檢測方向並改變你身體的方向。

例如:

document.getElementsByTagName("body")[0].style.webkitTransform = "rotate(-90deg)"; 
0

這段代碼將保持在-90度的方向(不錯的景觀模式,的iPad 2的封面將掛在後面)。將它放在腳本中的end body標籤下,或者將最後兩行放在一個onready調用中。

function orient() { 
    var keepOrientationAt = -90; 
    var rotate = "rotate(" + (keepOrientationAt - window.orientation) + "deg)"; 
    document.getElementsByTagName("body")[0].style.webkitTransform = rotate; 
} 

window.onorientationchange = orient;  
orient(); 
+1

不錯的主意,雖然旋轉時不能完美渲染。也許像重新定位整個身體和設置寬度或其他一些技巧可能會有所幫助。當然,這跟meo建議的一樣 – BoomShaka 2012-03-30 08:19:49

相關問題