我目前正在研究所有設備相對均等的網站;桌面&手機。我正在與％一起工作，因爲我認爲這是最佳選擇。一個網站可以強制設備旋轉鎖嗎？

它基於肖像模式。如果您將設備更改爲風景，整個網站看起來就像一個胖侏儒。

所以我想知道：有沒有可能鎖定一個網站，一直顯示它的肖像？

由此，我的意思是：設備旋轉鎖定。並不是說，當進入風景時，網站會在景觀中返回到肖像。（我已經看到了在計算器上一些代碼。）

Check my site at: http://prototyping.iscs.nl/mobiel.html

參考:)

在此先感謝

來源

2012-11-23 Sander Schaeffer

什麼自帶的提示要求他們回到風景。我在Game Informer的iPad應用程序上看到了這個：http://stackoverflow.com/questions/17972625/how-can-i-prompt-user-to-rotate-device-if-in-a-certain-mode-landscape- or-portrai – KevinOrin

我讀過你可以旋轉整個身體。如果用戶旋轉90度，那麼您也可以旋轉所有內容......這聽起來很合理。然而，我試圖找到一個很好的例子，因爲我還有一些問題，只有練習才能解決。 –

在更新。一箇舊的（'12）問題，我認爲這可以幫助很多人！

我還沒有想出鎖定設備旋轉的真正方法，但想出了一個完美的替代品，我已經看到一些人也這樣做。

選項A. 一個簡單的提示

通過使用簡單的jQuery腳本，您可以檢測設備的方向。

if(window.innerHeight > window.innerWidth){ 
    alert("Please use Landscape!"); 
}

好吧，簡單的警報很容易，但通知可以相當好！

選項B. 一個不錯的圖像通知

只是一個fixed元素添加到您的頁面時的方向已經改變了顯示。

HTML

<div class="turnDeviceNotification"></div>

CSS

.turnDeviceNotification { 
    position:fixed; 
    top: 0; 
    left:0; 
    height:100%; 
    width:100%; 
    display: none; 
}

就可以更新文本此元素，或者簡單地通過

.turnDeviceNotification { 
    background-image:url('../images/turnDevice.jpg'); 
    background-size:cover; 
}

只需將它連接到一個背景圖像加一個很好的背景到你的圖像文件夾，如下面的一個。

注意到該物體有一個display: none？那是因爲其他人甚至會在肖像模式下顯示。現在，您需要做的就是使用下面的腳本，因此該對象僅在橫向模式下顯示。

jQuery(window).bind('orientationchange', function(e) { 
switch (window.orientation) { 
    case 0: 
    $('.turnDeviceNotification').css('display', 'none'); 
    // The device is in portrait mode now 
    break; 

    case 180: 
    $('.turnDeviceNotification').css('display', 'none'); 
    // The device is in portrait mode now 
    break; 

    case 90: 
    // The device is in landscape now 
    $('.turnDeviceNotification').css('display', 'block'); 
    break; 

    case -90: 
    // The device is in landscape now 
    $('.turnDeviceNotification').css('display', 'block'); 
    break; 
} 
});

這將顯示只有當設備方向改變爲橫向的通知。 Sample image notification

來源

2014-05-26 15:19:44

好前面回答，但不是問題的答案，除非使用設備設置本身，否則鎖定設備旋轉是不可能的，因爲移動設備出現了方向改變。鎖定最取向 –

我不是說這個鎖定裝置的旋轉，但是來到附近的用戶的情況要好得多設備本身旋轉爲縱向模式。鎖定視口是awefull您的Web體驗。 –

而不是JQ uery檢測方向的變化，你可以使用：@media所有與（方向：橫向）{ .turnDeviceNotification { \t \t顯示：塊; \t \t } } @media所有和（方向：縱向）{ .turnDeviceNotification { \t \t顯示：無; \t \t} } – Turbojohan

不可能的。鎖定旋轉是一種設備設置：http://support.apple.com/kb/HT4085 未鎖定設備時，瀏覽器將旋轉，並且由於您的內容位於瀏覽器內部，因此內容也會旋轉。也許視將有助於解決您的問題：< META NAME =「視口」內容=「WIDTH =設備寬度」 />」我明白你缺少meta標籤

來源

2012-11-23 12:40:41

感謝您提供有關旋轉的信息。我想我寧可不使用這個元標記。我將它複製到我的HTML腳本中，但整個UI在我的手機上以縱向模式出現錯誤。如果刪除該行，它看起來OK再次.. –

也許嘗試硬編碼的寬度：」這篇文章是關於波泰特/景觀：HTTP：/本文/webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/ 壞的事情是，他們使用的「最大規模」。 –

我不認爲這是可能的，但有幾個方法可以解決

JS方式：window.DeviceOrientationEvent

CSS方式

@media (orientation: landscape) { body { background-color: black; } }

來源

2016-02-20 18:00:23 Terry

一個網站可以強制設備旋轉鎖嗎？

回答

選項A. 一個簡單的提示

選項B. 一個不錯的圖像通知

相關問題