3

我正在使用 Phonegap 创建一个多设备多平台应用程序。

基本上，我有两种情况：

  • 智能手机应锁定为纵向模式。
  • 平板电脑应锁定为横向模式。

我应该能够使用媒体查询自定义布局和放置，具体取决于设备是平板电脑还是智能手机（分别为横向或纵向）。无论设备如何，我都尝试过锁定纵向，然后使用 CSS 媒体查询和旋转转换，但我遇到了两个问题：

  • 我无法找到针对平板电脑并排除智能手机的媒体查询，反之亦然，分辨率的范围似乎太稀疏了。

  • 使用body{transform:rotate(90deg)}看起来像一场噩梦来确定一切。

我还研究了：https ://github.com/champierre/pg-plugin-screen-orientation但它似乎只适用于 Android，我需要同时支持 iOS 和 Android。

有没有人对这种特殊情况有任何经验？关于处理这个方向问题有什么建议吗？

4

1 回答 1

1

您可以使用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);

或者您可以使用此页面中的指南...

之后，您可以使用以下代码设置方向：

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

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

   });

我希望以上代码对您有所帮助；）

于 2013-05-07T17:18:38.580 回答