在离子应用程序中检测平板电脑

我正在研究离子应用程序，我们有一个按钮来呼叫某人。这在使用平板电脑时没有太多意义，因此如果用户使用平板电脑，我不想显示此按钮。在离子应用程序中检测平板电脑

如果设备是平板电脑（或者我想我也可以检测到设备是否具有电话应用），是否有使用离子/ cordova的简单方法？

2015-09-24 Dismissile

您可以看到如何在CordovaCallNumberPlugin中完成呼叫功能检测。有支持呼叫的平板电脑，所以我会检查这一点，但这当然取决于您，并取决于您的应用程序。

安卓：

 
private boolean isTelephonyEnabled(){ 
    TelephonyManager tm = (TelephonyManager)cordova.getActivity().getSystemService(Context.TELEPHONY_SERVICE); 

    return tm != null && tm.getPhoneType() != TelephonyManager.PHONE_TYPE_NONE; 
}

的iOS：

 
if(![[UIApplication sharedApplication] canOpenURL:[NSURL URLWithString:number]]) { 
    pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString:@"NoFeatureCallSupported"]; 
}

来源

2015-09-24 18:52:34 daserge

是的，但问题作者陈述如下：“或我想我也可以检测到设备是否有电话应用程序>>。平板电脑还可以支持打电话。 – daserge

“使用平板电脑时，这并没有什么意义，所以如果用户使用平板电脑，我不会显示此按钮。”但是，答案只是一个链接。 – DaveAlden

好的，用代码更新了答案。 – daserge

这取决于你支持的平台是多么容易。

Cordova“开箱即用”无法确定设备是否为平板电脑。

对于iOS，JavaScript的一个简单的位可用于检测该设备是否一个iPad通过检查用户代理字符串：

var isTablet = !!navigator.userAgent.match(/iPad/i);

然而，对于机器人，JS不够好，它需要一些本地Java：

private boolean isTabletDevice(Context applicationContext) { 
     boolean device_large = ((applicationContext.getResources().getConfiguration().screenLayout & 
       Configuration.SCREENLAYOUT_SIZE_MASK) >= 
       Configuration.SCREENLAYOUT_SIZE_LARGE); 

     if (device_large) { 
      DisplayMetrics metrics = new DisplayMetrics(); 
      Activity activity = this.cordova.getActivity(); 
      activity.getWindowManager().getDefaultDisplay().getMetrics(metrics); 

      if (metrics.densityDpi == DisplayMetrics.DENSITY_DEFAULT 
        || metrics.densityDpi == DisplayMetrics.DENSITY_HIGH 
        || metrics.densityDpi == DisplayMetrics.DENSITY_MEDIUM 
        || metrics.densityDpi == DisplayMetrics.DENSITY_TV 
        || metrics.densityDpi == DisplayMetrics.DENSITY_XHIGH) { 
       Log.d(LOG_TAG, "Is Tablet Device"); 
       return true; 
      } 
     } 
     Log.d(LOG_TAG, "Is NOT Tablet Device"); 
     return false; 
}

这个插件包装了一个易于使用的软件包Android和iOS这两种方法：https://github.com/dpa99c/phonegap-istablet。

来源

2015-09-24 18:45:44 DaveAlden

请加一点解释。否则，您的答案迟早会被标记为“仅链接答案”。 –

更新为建议 – DaveAlden

您可以使用ngCordova插件$cordovaDevice：http://ngcordova.com/docs/plugins/device/

只需添加$cordovaDevice作为依赖于你的控制器，并使用它告诉什么设备正在使用。

也许你可以建立一个模型阵列，并检查模型是否在该阵列内，如果是，则在HTML中使用ng-if或ng-show禁用该按钮。

例

app.controller('MyCtrl', [ 
    '$scope', 
    '$cordovaDevice', 
    function($scope, $cordovaDevice) { 
    var model = $cordovaDevice.getModel(); 

    var listOfModels = ['model1', 'model2', 'model3']; 

    if (listOfModels.indexOf(model) > -1) { 
     console.log("Model found inside array"); 
     $scope.enablePhoneCall = false; 
    } else { 
     console.log("Model NOT found inside array"); 
     $scope.enablePhoneCall = true; 
    } 
    } 
]);

HTML

<button class="button button-calm" ng-if="enablePhoneCall">Call</button>

PS：不要忘记添加ngCordova作为依赖当你定义离子的应用。

来源

2015-09-24 19:44:49 Ariel

Ionic为文档主体添加了各种平台类。在iOS中，您只需检查类别platform-ipad或platform-ipod以检查非iPhone。来源：Ionic Platform Body Classes & Platform Classes。

在Android上，这不会是那么直截了当，@Ariel给出的答案似乎是解决这个问题的好方法。

来源

2015-09-24 21:44:22

找到了一种更简单的方法，不需要插件，适用于IOS和Android平板电脑。

只需添加到您的应用的run功能下面的一段代码。

angular.module('app').run(function ($rootScope, $window) { 
    // Get the current platform. 
    var platform = ionic.Platform.platform(); 

    // Initialize isTablet and isApp to false. 
    $rootScope.isTablet = $rootScope.isApp = false; 

    if (platform === 'android' || platform === 'ios') { 
     // Check if the larger size of your window is bigger than 700px. 

     // The reason I am checking for the max is because the tablet 
     // might be in landscape mode. 
     Math.max($window.innerHeight, $window.innerWidth) > 700 ? 
      $rootScope.isTablet = true : $rootScope.isApp = true; 
    } 
}

现在，您可以在应用程序的任何位置轻松知道它是应用程序还是平板电脑或台式机。

在HTML：

<!-- App Logic --> 
<div ng-if="isApp"> 
    ... 
</div> 

<!-- Tablet Logic --> 
<div ng-if="isTablet"> 
    ... 
</div> 

<!-- Desktop Logic --> 
<div ng-if="!isApp && !isTablet"> 
    ... 
</div>

在JS控制器

angular.module('app').controller('myController', function($rootScope) { 
    if ($rootScope.isApp) { 
     // App Logic 
     ... 
    } else if ($rootScope.isTablet) { 
     // Tablet Logic 
     ... 
    } else { 
     // Desktop Logic 
     ... 
    } 
}

附：不要忘记将我的示例中的'app'这个词更改为您的离子应用程序的名称，并将$rootScope注入您将使用它的任何控制器中。

P.P.S.如果今天或明天推出的新手机中的一款在屏幕较大尺寸上的尺寸大于700像素，我会将其视为平板电脑。

来源

2017-08-23 22:02:37

在离子应用程序中检测平板电脑

回答

相关问题