在離子應用程序中檢測平板電腦

我正在研究離子應用程序，我們有一個按鈕來呼叫某人。這在使用平板電腦時沒有太多意義，因此如果用戶使用平板電腦，我不想顯示此按鈕。在離子應用程序中檢測平板電腦

如果設備是平板電腦（或者我想我也可以檢測到設備是否具有電話應用），是否有使用離子/ 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

在離子應用程序中檢測平板電腦

回答

相關問題