如何在Web應用程序中爲iPhone控制屏幕方向

我有一個非常基本的網頁，它使用flot創建基於canvas的圖（類似於SO用於信譽圖的內容）。如何在Web應用程序中爲iPhone控制屏幕方向

在PC顯示器的情況下，它應該正常輸出，寬度（x軸）是高度的1.6倍。

但是對於iPhone而言，如果不是以「縱向」方向溢出，頁面默認爲橫向，鼓勵（或迫使）用戶將手機視爲PC用戶的圖表將。

所以我的問題是：

1）有沒有一種方法（使用CSS，JS，或者乾脆HTML head標籤）不斷在畫布上旋轉檢測縱向90度？

2）總體而言，是否有辦法旋轉元素/對象，無論誰在查看它？

3）有沒有辦法避免iPhone在設備旋轉時旋轉內容的默認行爲？很顯然，我希望用戶在看到它橫向顯示時旋轉設備，但我不希望圖表翻轉，當他們打開手機時仍然側身，戲弄他們繼續翻轉手機，並且從未獲得該圖保持不變。

謝謝！

來源

2009-12-10 Anthony

就是這樣。

window.onorientationchange = function() { 

    var orientation = window.orientation; 
    switch(orientation) { 
    case 0: 

    document.body.setAttribute("class","portrait"); 

    break; 

    case 90: 

    document.body.setAttribute("class","landscapeLeft"); 

    document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the left (Home button to the right)."; 
    break; 

    case -90: 

    document.body.setAttribute("class","landscapeRight"); 

    document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the right (Home button to the left)."; 
    break; 
    } 
}

來源

2009-12-10 08:26:14

這絕對是我曾在心神。非常優雅的是，它考慮到用戶使用iPhone檢測轉彎和沒有轉動設備。 – Anthony

1/2）你試過-web-transform？看到這個Apple web page

3）我覺得你不能抑制自動旋轉

來源

2009-12-10 08:28:51 muccy

+1指向我真的很棒的資源。 – Anthony

的另一種選擇是用下面的代碼來定位你的CSS：

/* Portrait */ 
@media screen and (max-width: 320px){ 
    /* Place your style definitions here */ 
} 

/* Landscape */ 
@media screen and (min-width: 321px){ 
    /* Place your style definitions here */ 
}

來源

2010-12-23 17:34:33

如何在Web應用程序中爲iPhone控制屏幕方向

回答

相關問題