0

Ionic フレームワークを使用してモバイル サイトを構築しています。AngularJS (または ionic) を使用してモバイル デバイス (Android および iOS) を検出したい。

アクセス端末が Android の場合 → #/android アクセス端末が 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'
  })
});

ダッシュ.html

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

1 に答える 1

4

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

ただし、必要がない場合は、別のマークアップ構造を使用することはお勧めしません。platform-android代わりに、プラットフォーム、Ionic の場所、またはbody タグ クラスに応じて異なるスタイルがある場合は、platform-ios次のようなことができます。

.platform-android h1 { color: green; }

于 2014-11-10T05:55:59.240 に答える