ionic 平台

Ionic 平台（Platform）完全实战指南

（Ionic 7+，判断设备、方向、尺寸、暗黑模式、键盘等所有场景）

1. 注入和基本使用（99% 场景都这么写）

import { Platform } from '@ionic/angular';

constructor(private platform: Platform) {}

ngOnInit() {
  // 常用判断写在这里
  console.log('是手机？', this.platform.is('mobile'));        // true
  console.log('是平板？', this.platform.is('tablet'));
  console.log('是 iOS？', this.platform.is('ios'));
  console.log('是 Android？', this.platform.is('android'));
  console.log('是桌面浏览器？', this.platform.is('desktop'));
  console.log('是 PWA？', this.platform.is('pwa'));
  console.log('是横屏？', this.platform.isLandscape());
  console.log('是竖屏？', this.platform.isPortrait());
}

2. 最常用判断合集（直接复制）

需求	代码写法	说明
只在真机上执行	if (this.platform.is('capacitor') || this.platform.is('cordova'))	浏览器里不执行原生代码
只在 iPhone 上执行	if (this.platform.is('iphone'))	包括 iPhone + iPad
只在 Android 手机上执行	if (this.platform.is('android') && this.platform.is('mobile'))	排除平板
判断是暗黑模式	if (this.platform.is('dark'))	自动跟随系统
判断是否刘海屏/安全区	if (this.platform.is('ios') && parseInt(this.platform.platforms()[0].split('ios')[1] || '0') >= 11)	粗暴但有效
页面准备好后执行（推荐）	this.platform.ready().then(() => { ... })	比 ngOnInit 更保险

3. 动态监听（屏幕旋转、暗黑模式切换等）

// 监听屏幕方向变化
this.platform.resize.subscribe(() => {
  console.log('当前方向：', this.platform.isLandscape() ? '横屏' : '竖屏');
});

// 监听暗黑模式切换（超实用）
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
  const dark = e.matches;
  document.body.classList.toggle('dark', dark);
});

4. 键盘处理（输入框不被遮挡！）

import { Keyboard } from '@ionic/angular';

ngOnInit() {
  // 键盘弹出时自动上推页面（默认开启，无需代码）
  // 如果你手动关了，可以这样重新打开：
  this.keyboard.setResizeMode('native'); // 或 'ionic'

  // 监听键盘高度（自定义处理）
  this.keyboard.onKeyboardWillShow().subscribe(e => {
    console.log('键盘弹出，高度：', e.keyboardHeight);
    document.documentElement.style.setProperty('--keyboard-height', `${e.keyboardHeight}px`);
  });

  this.keyboard.onKeyboardWillHide().subscribe(() => {
    document.documentElement.style.removeProperty('--keyboard-height');
  });
}

/* 配合键盘高度做底部固定按钮 */
ion-footer {
  margin-bottom: var(--keyboard-height, 0);
  transition: margin-bottom 0.3s;
}

5. 安全区（刘海屏、iPhone X 底部小黑条）—— 2025 必写！

/* global.scss 全局写一次即可 */
ion-content {
  --offset-bottom: env(safe-area-inset-bottom);
  --offset-top: env(safe-area-inset-top);
}

/* 底部固定按钮自动避开小黑条 */
ion-footer {
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: constant(safe-area-inset-bottom); /* iOS < 11.2 兼容 */
}

<!-- 页面内容自动避开刘海 -->
<ion-content class="ion-padding" fullscreen>
  <!-- fullscreen 会自动加上 --offset-top -->
</ion-content>

6. 平台样式自动切换（一行代码搞定）

<!-- 自动根据平台切换图标 -->
<ion-icon name="arrow-back" mode="ios"></ion-icon>
<ion-icon name="arrow-back-sharp" mode="md"></ion-icon>

<!-- 或者用 CSS 变量（推荐） -->
<ion-icon [name]="platform.is('ios') ? 'heart' : 'heart-sharp'"></ion-icon>

7. 终极封装（推荐放 utils 或 service）

// platform.util.ts
import { Platform } from '@ionic/angular';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class DeviceUtil {
  constructor(private platform: Platform) {}

  isIOS() { return this.platform.is('ios'); }
  isAndroid() { return this.platform.is('android'); }
  isMobile() { return this.platform.is('mobile'); }
  isRealDevice() { return this.platform.is('capacitor') || this.platform.is('cordova'); }
  isDarkMode() { return window.matchMedia('(prefers-color-scheme: dark)').matches; }
}

8. 一句话总结

// 任何页面最前面都写这几行就够了
await this.platform.ready();
if (this.platform.is('ios')) { /* iOS 特有 */ }
if (this.platform.is('android')) { /* Android 特有 */ }

这样写出来的 App，无论 iPhone 16、华为、小米折叠屏、iPad、Web 端、PWA，全部完美适配！

需要我发你一个「完整适配所有机型 + 刘海屏 + 暗黑模式 + 键盘不遮挡」的 Ionic 模板页面吗？一句话就发～