如何在Ionic/Cordova+Angular5中仅为移动设备显示SwitchPreference

嘿，这个需求其实挺常见的，在你用Ionic/Cordova结合Angular 5开发的场景下，有几种靠谱的实现方式，我给你梳理一下：

方法一：利用Ionic的Platform服务（推荐） #

Ionic内置的Platform服务已经封装了设备类型检测的能力，能直接区分手机、平板等设备类型，使用起来非常方便。

步骤： #

1. 在组件中注入Platform服务
2. 初始化时判断当前设备是否为手机
3. 在模板中通过*ngIf控制设置项的显示

组件代码示例：

import { Platform } from 'ionic-angular';
import { Component } from '@angular/core';

@Component({
  selector: 'app-preferences',
  templateUrl: './preferences.component.html'
})
export class PreferencesComponent {
  isMobileDevice: boolean;

  constructor(private platform: Platform) {
    // 精准判断：仅手机设备（排除平板）
    this.isMobileDevice = this.platform.is('mobile') && !this.platform.is('tablet');
    
    // 也可以针对特定系统细化判断
    // this.isMobileDevice = (this.platform.is('ios') || this.platform.is('android')) && !this.platform.is('tablet');
  }
}

模板代码示例：

<!-- 仅移动设备可见的偏好项 -->
<div *ngIf="isMobileDevice" class="preference-item">
  <label>仅手机可见的设置</label>
  <ion-toggle [(ngModel)]="mobileOnlyPreference"></ion-toggle>
</div>

<!-- 所有设备可见的偏好项 -->
<div class="preference-item">
  <label>通用设置</label>
  <ion-toggle [(ngModel)]="generalPreference"></ion-toggle>
</div>

方法二：CSS媒体查询（基于屏幕尺寸） #

如果你的需求更偏向于屏幕尺寸区分（而非严格的硬件设备类型），可以用Ionic内置的断点通过CSS控制显示。

CSS代码示例： #

/* 默认显示该设置项 */
.mobile-only {
  display: block;
}

/* 平板及更大尺寸设备隐藏 */
@media (min-width: 768px) {
  .mobile-only {
    display: none;
  }
}

模板代码示例：

<div class="preference-item mobile-only">
  <label>仅手机可见的设置</label>
  <ion-toggle [(ngModel)]="mobileOnlyPreference"></ion-toggle>
</div>

注意：这种方法依赖屏幕宽度，可能会把大尺寸手机误判为平板，适合对设备类型区分要求不那么严格的场景。

方法三：Cordova Device插件（精准硬件判断） #

如果需要严格基于硬件设备类型判断（比如区分iPad和iPhone），可以使用Cordova的cordova-plugin-device插件获取设备硬件信息。

步骤： #

1. 安装插件：

cordova plugin add cordova-plugin-device

2. 在组件中监听deviceready事件（必须等待Cordova加载完成才能获取设备信息）
3. 根据设备型号判断是否为手机

组件代码示例：

import { Component } from '@angular/core';

// 声明Cordova的device对象
declare var device: any;

@Component({
  selector: 'app-preferences',
  templateUrl: './preferences.component.html'
})
export class PreferencesComponent {
  isMobileDevice: boolean = false;

  constructor() {
    // 等待Cordova初始化完成
    document.addEventListener('deviceready', () => {
      this.detectMobileDevice();
    });
  }

  private detectMobileDevice(): void {
    if (device.platform === 'iOS') {
      // iOS设备：排除iPad
      this.isMobileDevice = !device.model.includes('iPad');
    } else if (device.platform === 'Android') {
      // Android设备：排除包含Tablet的型号
      this.isMobileDevice = !device.model.includes('Tablet');
    } else {
      // 其他平台默认不显示
      this.isMobileDevice = false;
    }
  }
}

模板代码示例：

和方法一的模板一致，通过*ngIf="isMobileDevice"控制显示。

内容的提问来源于stack exchange，提问作者Omar Bahir