通過css/js/html強制設備方向爲橫向？

Question

可能重複：
Mobile site - force landscape only/no auto-rotate

我已經看到了關於這幾個posts，但沒有真正找到一個明確的答案，而一些建議的解決辦法。

是否可以通過網頁強制設備方向？ I.e：我可以將我的網站「封堵」爲風景嗎？

非常感謝

Answer 1

您可以用JavaScript。如果支持首先檢查：

if (window.DeviceOrientationEvent) { 
    console.log("DeviceOrientation is supported"); 
} 

然後，如果你想要做的事上旋轉添加事件監聽：

window.addEventListener('deviceorientation', function(eventData) {}); 

我想你會觸發你身邊當它轉向響應。您無法觸發方向，因爲設備會這樣做。因此，當您的網站以橫向模式加載時，您應該檢測它並以橫向模式呈現網站（加載自定義CSS？），然後當訪問者轉動手機或平板電腦時，監聽器可以使用新的CSS重新呈現您的網站通過JavaScript文件（jQuery建議這些情況）。

你也可以做到這一點，該網站沒有太多的動態，你可以重新加載頁面GET方法調用來改變方向，但當然這是一個較慢的選項。使用JavaScript在移動設備上重新渲染整個網站通常甚至可以加熱我的iPhone上測試過的電話。 JavaScript引擎速度很快，可以抽出很多CPU來順利渲染所有內容，但也會在短時間內消耗大量資源，使移動設備難以持續保持渲染效果。最好的例子是用JavaScript調用HTML5遊戲。一個iPhone最終會像在一個實際的App中玩遊戲一樣升溫：P。