Question

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

基本上，我有两种情况：

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

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

我无法找到针对平板电脑的媒体查询并排除智能手机，反之亦然，决议范围似乎过于稀疏。
与body{transform:rotate(90deg)}合作看起来像是一场噩梦，将一切都搞定了。

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

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

Answer 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');
    }

   });

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

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

1 个答案: