Detect tablet in ionic app - angularjs

Question

I am working on an ionic app and we have a button to Call someone. This doesn't make a whole lot of sense when using a tablet so I would like to not show this button if the person is using a tablet.
Is there an easy way using ionic/cordova that I can detect if the device is a tablet (or I suppose I could also detect if the device has a phone application)?

Answer 1

You can see how call feature detection is done in CordovaCallNumberPlugin.
There are tablets which support calling so I would check for this, but this is of course up to you and depends on your application.
Android:
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 2

It depends what platforms you are supporting as to how easy this is.
Cordova "out-of-the-box" can't determine if a device is a tablet.
For iOS, a simple bit of Javascript can be used to detect if the device is an iPad by examining the user agent string:
var isTablet = !!navigator.userAgent.match(/iPad/i);
However, for Android, JS isn't good enough, it requires some native 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;
}
This plugin wraps up both these approaches in an easy-to-use package for Android and iOS: https://github.com/dpa99c/phonegap-istablet.

Answer 3

You can use ngCordova plugin $cordovaDevice: http://ngcordova.com/docs/plugins/device/
Just add $cordovaDevice as a dependency in your controller and use it to tell what device is being used.
Perhaps you can build an array of models and check if the model is inside of that array, if it is, then disable the button with an ng-if or ng-show in the HTML.
Example
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>
More info:
http://ngcordova.com/docs/plugins/device/
https://github.com/apache/cordova-plugin-device
List of models: http://theiphonewiki.com/wiki/index.php?title=Models
PS: Don't forget to add ngCordova as a dependency when you define your ionic app.

Answer 4

Ionic adds various platform classes to the document body. In iOS you can simply check for the classes platform-ipad or platform-ipod to check for a non-iPhone. Source: Ionic Platform Body Classes & Platform Classes.
On Android this won't be so straight forward and the answer #Ariel gave seems like a good approach to this issue.

Answer 5

Found an easier way that doesn't need plugins and works for both IOS and Android tablets.
Just add to the run function of your app the following piece of code.
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;
}
}
Now anywhere throughout your app you can use easily know if it is an app or a tablet or desktop.
In Html:
<!-- App Logic -->
<div ng-if="isApp">
...
</div>
<!-- Tablet Logic -->
<div ng-if="isTablet">
...
</div>
<!-- Desktop Logic -->
<div ng-if="!isApp && !isTablet">
...
</div>
In JS Controllers
angular.module('app').controller('myController', function($rootScope) {
if ($rootScope.isApp) {
// App Logic
...
} else if ($rootScope.isTablet) {
// Tablet Logic
...
} else {
// Desktop Logic
...
}
}
P.S. Don't forget to change the word 'app' in my examples to the name of your ionic app, and to inject $rootScope in any controller that you will be using it.
P.P.S. if indeed one of the new phones coming out today or tomorrow have a bigger size than 700px on the larger dimension of their screen, I would treat it as a tablet.