iOS / Android Phonegap - 智能手机的肖像,平板电脑上的风景

时间:2013-05-07 14:43:49

标签: android ios cordova orientation media-queries

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

基本上,我有两种情况:

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

我应该可以使用媒体查询自定义布局和展示位置,具体取决于设备是平板电脑还是智能手机(分别是横向或纵向)。 无论设备如何,我都尝试锁定到肖像,然后使用CSS媒体查询和旋转变换,但我遇到了两个问题:

  • 我无法找到针对平板电脑的媒体查询并排除智能手机,反之亦然,决议范围似乎过于稀疏。

  • body{transform:rotate(90deg)}合作看起来像是一场噩梦,将一切都搞定了。

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

有没有人有过这种特殊情况的经验?有关处理此定位问题的任何建议吗?

1 个答案:

答案 0 :(得分: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);

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

中的指南

之后,您可以使用以下代码设置方向:

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

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

   });

我希望以上代码对您有所帮助;)