Question

我正在开发一款离子应用程序，我们有一个按钮可以给某人打电话。使用平板电脑时，这并没有多大意义，所以如果此人使用平板电脑，我不想显示此按钮。

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

Answer 1

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

Cordova＆＃34;开箱即用＆＃34;无法确定设备是否为平板电脑。

对于iOS，可以通过检查用户代理字符串，使用一小段Javascript来检测设备是否为iPad：

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

然而，对于Android来说，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。

Answer 2

您可以在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"];
}

Answer 3

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

只需在控制器中添加$cordovaDevice作为依赖项，并使用它来说明正在使用的设备。

也许你可以构建一个模型数组并检查模型是否在该数组中，如果是，则禁用HTML中带有ng-if或ng-show的按钮。

实施例

<强> JS

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>

更多信息：

模型列表：http://theiphonewiki.com/wiki/index.php?title=Models

PS：在定义离子应用程序时，不要忘记添加ngCordova作为依赖项。

Answer 4

Ionic为文档正文添加了各种平台类。在iOS中，您只需检查类platform-ipad或platform-ipod即可检查非iPhone。资料来源：Ionic Platform Body Classes＆amp; Platform Classes

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

Answer 5

找到一种不需要插件的简单方法，适用于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
        ...
    }
}

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

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

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

5 个答案: