防止iOS Safari中的方向更改

當設備旋轉時，是否可以避免在Safari for iOS中過渡到橫向視圖？防止iOS Safari中的方向更改

iOS的Safari瀏覽器有「orentationchange」事件，我試圖攔截它，並禁用默認的行爲，就像這樣：

<html> 
<head> 
<script type="text/javascript"> 
function changeOrientation(event) { 
    alert("Rotate"); 
    event.preventDefault(); 
} 
</script> 
</head> 
<body onorientationchange="changeOrientation(event);"> 
PAGE CONTENT 
</body> 
</html>

，但在我的iPhone，測試頁面的時候，當我旋轉設備警報顯示，但視圖切換到橫向。看來，event.preventDefault（）不會停止旋轉。

有沒有辦法阻止這種行爲？

來源

2011-03-14 Davide Gualano

相關：http://stackoverflow.com/questions/1207008/how-do-i-lock-the-orientation-to-portrait-mode-in-a-iphone-web-application – xdhmoore 2013-09-04 20:13:14

閱讀由@xdhmoore鏈接的問題。除此之外，這是非常值得的。 – Boaz 2014-09-09 08:23:45

在Mobile Safari中無法強制特定的方向;當用戶旋轉設備時，它總是會自動旋轉。

也許您可以顯示某些不支持的方向，通知用戶方向不受支持，並且他們需要旋轉設備以使用您的Web應用程序。

來源

2011-03-14 12:27:53 BoltClock

-3

如果有可能（我不相信它），那麼我強烈建議不要這樣做。用戶討厭被迫以特定的方式瀏覽網頁。如果他們在碼頭上使用他們的iPhone，並且無法將其橫向放置在橫向模式下，或者他們更喜歡橫向版鍵盤，那麼鍵會更大，會怎麼樣？

如果您的設計需要特定的方向，那麼您可能需要重新考慮您的設計。

來源

2011-03-14 12:31:54 GordonM

我正在構建的web應用程序針對的是在城市周圍步行的用戶，所以我一直在想，默認的縱向視圖可能是更自然的體驗方式。我必須考慮不同的情況，謝謝指出這一點。 – 2011-03-14 13:20:35

+12

如果您的應用使用deviceorientation事件作爲例子，那麼當用戶將設備向一個方向移動得太遠時，您不希望它自動旋轉，否則遊戲會變得非常煩人。 – 2011-07-16 01:21:26

這類評論太傲慢了。大多數非書呆子用戶僅使用這些「自定義視圖」選項，因爲他們正在查看的網頁具有可怕的可用性和佈局或小字體等等......簡單地聲明用戶需要靈活性並不是很有幫助。一個用於防止自動旋轉內容的元標記是非常有保證的 - 應用程序可以做到這一點... – tim 2012-09-25 20:12:03

Jonathan Snook已解決此問題。在他的幻燈片here中，他演示瞭如何（有點）鎖定肖像（請參見幻燈片54和55）。

從這些幻燈片的JS代碼：

window.addEventListener('orientationchange', function() { 
    if (window.orientation == -90) { 
     document.getElementById('orient').className = 'orientright'; 
    } 
    if (window.orientation == 90) { 
     document.getElementById('orient').className = 'orientleft'; 
    } 
    if (window.orientation == 0) { 
     document.getElementById('orient').className = ''; 
    } 
}, true);

和CSS：

.orientleft #shell { 
    -webkit-transform: rotate(-90deg); 
    -webkit-transform-origin:160px 160px; 
} 

.orientright #shell { 
    -webkit-transform: rotate(90deg); 
    -webkit-transform-origin:230px 230px; 
}

我試圖讓本作景觀在iPhone上工作，但是它永遠不會看着100 ％正確。然而，我接近了下面的jQuery代碼。這將在onready函數中。還要注意：這是在「保存到主屏幕」的上下文中，我認爲這改變了轉換起源的位置。

$(window).bind('orientationchange', function(e, onready){ 
    if(onready){ 
     $(document.body).addClass('portrait-onready'); 
    } 
    if (Math.abs(window.orientation) != 90){ 
     $(document.body).addClass('portrait'); 
    } 
    else { 
     $(document.body).removeClass('portrait').removeClass('portrait-onready'); 
    } 
}); 
$(window).trigger('orientationchange', true); // fire the orientation change event at the start, to make sure

而CSS：

.portrait { 
    -webkit-transform: rotate(90deg); 
    -webkit-transform-origin: 200px 190px; 
} 
.portrait-onready { 
    -webkit-transform: rotate(90deg); 
    -webkit-transform-origin: 165px 150px; 
}

希望幫助別人親近期望的結果...

來源

2011-08-15 05:35:55 fisherwebdev

你是否嘗試將變換原點更改爲0,0？ – tim 2012-09-25 20:14:16

我投了這個票，只因爲它讓我笑得這麼厲害。巧妙！ – Westie 2013-10-01 16:44:57

我有這個想法，但不知道它是否會奏效......很高興聽到它：D這應該是接受的答案 – nevelis 2014-09-28 20:38:52

一個spec來實現這個功能已經被提出。

另請參閱this Chromium bug以獲取更多信息（仍不清楚它是否會在WebKit或Chromium中實現）。

來源

2012-03-05 06:09:55

我認爲對於我們的情況，我們需要提供一個統一的數據視圖，我們正在屏幕上顯示醫學調查數據，不允許旋轉設備的屏幕。我們設計應用程序以縱向工作。因此，最好的解決方案是鎖定它，這不能通過瀏覽器完成，或者顯示一個錯誤/消息，指示應用程序在方向修復之前無法使用。

來源

2012-05-16 17:54:05

也許在新的未來......

至於2015年5月，

有一座實驗性功能，做到這一點。但它只適用於Firefox 18 +，IE11 +和Chrome 38+。

但是，它不適用於Opera或Safari。

https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation#Browser_compatibility

下面是兼容的瀏覽器當前代碼：

var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation; 

lockOrientation("landscape-primary");

來源

2015-05-13 18:37:19

下面的解決方案似乎爲我工作iPhone4上，5，6，和6+爲2016年6月的

<script> 
    /** 
    * we are locking mobile devices orientation to portrait mode only 
    */ 
    var devWidth, devHeight; 
    window.addEventListener('load', function() { 
    devWidth = screen.width; 
    devHeight = screen.height; 
    }); 
    window.addEventListener('orientationchange', function() { 
    if (devWidth < 768 && (window.orientation === 90 || window.orientation == -90)) { 
     document.body.style.width = devWidth + 'px'; 
     document.body.style.height = devHeight + 'px'; 
     document.body.style.transform = 'rotate(90deg)'; 
     document.body.style.transformOrigin = ''+(devHeight/2)+'px '+(devHeight/2)+'px'; 
    } else { 
     document.body.removeAttribute('style'); 
    } 
    }, true); 
</script>

來源

2016-06-03 22:23:02 allenhwkim

雖然你不能阻止發生作用的方向變化在超視距說，你可以模擬任何變化呃答案。

首先檢測設備方向或重新定位，並使用JavaScript向包裝元素添加類名（本例中使用body標籤）。

function deviceOrientation() { 
    var body = document.body; 
    switch(window.orientation) { 
    case 90: 
     body.classList = ''; 
     body.classList.add('rotation90'); 
     break; 
    case -90: 
     body.classList = ''; 
     body.classList.add('rotation-90'); 
     break; 
    default: 
     body.classList = ''; 
     body.classList.add('portrait'); 
     break; 
    } 
} 
window.addEventListener('orientationchange', deviceOrientation); 
deviceOrientation();

然後，如果該裝置是風景，利用CSS設置的車身寬度到視口的高度和主體高度到視口寬度。讓我們在設置轉換原點的同時，

@media screen and (orientation: landscape) { 
    body { 
    width: 100vh; 
    height: 100vw; 
    transform-origin: 0 0; 
    } 
}

現在，調整身體元素並將其滑動（平移）到位。

body.rotation-90 { 
    transform: rotate(90deg) translateY(-100%); 
} 
body.rotation90 { 
    transform: rotate(-90deg) translateX(-100%); 
}

來源

2016-11-27 09:01:18

防止iOS Safari中的方向更改

回答

相關問題