如何检测移动设备 [英] How to detect mobile device

问题描述

我正在使用离子框架构建一个移动站点.我想使用AngularJS(或离子)检测移动设备(Android和iOS).

如果访问设备是Android→#/android如果访问设备是iOS→#/ios

controllers.js

  function uaCtrl('$ scope'，'$ location'，($ scope，$ location){$ scope = function(){var isMobile = {Android:function(){返回navigator.userAgent.match(/Android/i);}，iOS:function(){返回navigator.userAgent.match(/iPhone | iPad | iPod/i)}}if(isMobile.Android()){$ location.path('#/android');}否则if(isMobile.iOS()){$ location.path('#/ios');}别的{$ location.path('#/ios');}}; 

};

app.js

  .config(function($ stateProvider，$ urlRouterProvider){$ urlRouterProvider.otherwise('/破折号);$ stateProvider.state('home'，{网址:"/破折号"，templateUrl:"templates/dash.html"}).state('android-home'，{网址:"/android"，templateUrl:"templates/dash-android.html"}).state('ios-home'，{网址:"/ios"，templateUrl:"templates/dash-ios.html"})}); 

dash.html

 < ion-view hide-nav-bar ="true" ng-controller ="uaCtrl">??????</ion-view> 

解决方案

ionic.Platform.isIOS()我相信您正在寻找的是.

平台文档: http://ionicframework.com/docs/api/utility/ionic.Platform/

它是单元测试: https://github.com/driftyco/ionic/blob/master/test/unit/angular/service/platform.unit.js

但是，如果您不需要的话，我不建议您使用其他标记结构.相反，如果您根据平台使用不同的样式，则Ionic将 platform-android 或 platform-ios 放在body标签类中，因此您可以执行以下操作:

.platform-android h1 {颜色:绿色；}

I am building a mobile site using the ionic framework. I want to detect mobile devices(Android and iOS) with AngularJS (or ionic).

If access device is Android → #/android if access device is iOS → #/ios

controllers.js

function uaCtrl('$scope', '$location', ($scope, $location) {
$scope = function () {
  var isMobile = {
    Android: function() {
      return navigator.userAgent.match(/Android/i);
    },
    iOS: function() {
      return navigator.userAgent.match(/iPhone | iPad | iPod/i)
    }
  }

  if(isMobile.Android()) {
    $location.path('#/android');
  }else if(isMobile.iOS()) {
    $location.path('#/ios');
  }else{
    $location.path('#/ios');
  }

};

};

app.js

.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/dash');

  $stateProvider

  .state('home', {
      url: '/dash',
      templateUrl: 'templates/dash.html'
    })

  .state('android-home', {
    url: '/android',
    templateUrl:'templates/dash-android.html'
  })

  .state('ios-home', {
    url: '/ios',
    templateUrl:'templates/dash-ios.html'
  })
});

dash.html

<ion-view hide-nav-bar="true" ng-controller="uaCtrl">
    ?????
</ion-view>

解决方案

ionic.Platform.isIOS() I believe is what you're looking for.

Platform docs: http://ionicframework.com/docs/api/utility/ionic.Platform/

It's unit tests: https://github.com/driftyco/ionic/blob/master/test/unit/angular/service/platform.unit.js

However, I wouldn't recommend using different markup structures if you don't have to. Instead, if you have different styles depending on the platform, Ionic places platform-android or platform-ios in the body tag class, so you could do things like:

.platform-android h1 { color: green; }

这篇关于如何检测移动设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！