iOS/Android Phonegap - 智能手機肖像，平板電腦上的風景

我正在用Phonegap創建多設備多平臺應用程序。iOS/Android Phonegap - 智能手機肖像，平板電腦上的風景

基本上，我有兩種情況：

智能手機應被鎖定到肖像模式。
片劑應鎖定在風景模式。

我應該能夠通過媒體查詢自定義佈局和佈局，具體取決於設備是平板電腦還是智能手機（分別爲橫向或縱向）。我已經嘗試了鎖定爲縱向，無論設備，然後使用CSS媒體查詢和旋轉變換，但我有兩個問題，運行：

我一直沒能找到一個媒體查詢目標平板電腦和排除智能手機，反之，決議的範圍似乎太稀少。
使用body{transform:rotate(90deg)}看起來像一個噩夢來釘住一切。

我也看了成：https://github.com/champierre/pg-plugin-screen-orientation但它似乎爲Android將唯一的工作，我需要同時支持iOS和Android。

有沒有人有這方面的經驗？有關處理這個定位問題的任何建議？

來源

2013-05-07 Cenobyte321

我有同樣的要求（iOS和Android，智能手機的肖像，風景的平板電腦）。你最終做了什麼？ – user276648 2013-07-30 08:44:56

您可以使用navigator.userAgent來獲取設備類型。例這樣的事情：

var deviceType = (navigator.userAgent.match(/iPad/i)) == "iPad" ? "iPad" : (navigator.userAgent.match(/iPhone/i)) == "iPhone" ? "iPhone" : (navigator.userAgent.match(/Android/i)) == "Android" ? "Android" : (navigator.userAgent.match(/BlackBerry/i)) == "BlackBerry" ? "BlackBerry" : "null"; 

alert(navigator.userAgent);

或者你可以使用this page...

的指南後，您可以使用下面的代碼來設置方向：

$(window).bind('orientationchange', function(event){ 

    if (/*is tablet*/) { 
    navigator.screenOrientation.set('landscape'); 
    } 
    else if (/* is smart phone */) { 
    navigator.screenOrientation.set('portrait'); 
    } 

    });

我希望上面的代碼對你有幫助;）

來源

2013-05-07 17:18:38

謝謝！看起來是一個很好的起點。然而，簡單的用戶代理檢測很難區分任何平板電腦和手機。我發現這個庫：http://blog.mobileesp.com/這似乎是工作，我會做一些測試和更新的結果！ – Cenobyte321 2013-05-07 20:26:10

所以我已經能夠在手機和平板電腦之間正確檢測（稍後會發布代碼），但我相信設置screenOrientation的解決方案僅適用於Android？第二塊代碼使用我已經探索過的Android專用插件？ https://github.com/champierre/pg-plugin-screen-orientation – Cenobyte321 2013-05-07 23:16:18

iOS/Android Phonegap - 智能手機肖像，平板電腦上的風景

回答

相關問題