如何再plugin.ts中判断当前页面是否为移动端

在`plugin.ts`中判断当前页面是否为移动端，可以利用JavaScript的一些浏览器检测库，例如`Modernizr`、`Device Detection HTML5` 或者自定义的正则表达式等。这里提供一个使用`Modernizr`库的例子：

首先，你需要在项目中引入`Modernizr`，并启用对touch事件的支持，因为触摸事件通常是移动设备的标志：

npm install modernizr --save

然后，在`plugin.ts`中添加以下代码来检测移动端：

import * as Modernizr from 'modernizr';

function isMobile() {
  return Modernizr.touch || (Modernizr.mq && Modernizr.mq('(max-width: 768px)')); // 可能需要根据你的需求调整这个宽度阈值
}

// 使用isMobile函数来决定是否执行移动端特有的操作
if (isMobile()) {
  // 执行针对移动端的插件功能
} else {
  // 执行针对桌面端的插件功能
}

这里通过`Modernizr.touch`来检测是否有触控能力，和媒体查询`(max-width: 768px)`来判断屏幕尺寸。

相关问题

plugin.ts如何在移动端时再注入addHTMLScripts，否则pc端的页面文字也会变大，如何规避这个问题

在`plugin.ts`文件中处理移动端和PC端差异，特别是在添加HTML脚本时，通常的做法是使用条件注释（如`<script>`标签的`type="module"`属性和`nomodule`属性，或` Modernizr`库检测浏览器特性）。这里是一个简单的例子：

import { isMobile } from './utils/deviceDetector'; // 假设有一个设备检测工具库

export function addHTMLScripts() {
  if (isMobile()) {
    // 移动端：使用渐进增强的方式，只加载适合移动的脚本
    const mobileScript = '<script type="text/javascript" src="mobile-script.js"></script>';
    document.body.insertAdjacentHTML('beforeend', mobileScript);
  } else {
    // PC端：加载常规的脚本
    const pcScript = '<script type="module" src="pc-script.js"></script><noscript><script src="pc-script-nomodule.js"></script></noscript>';
    document.head.appendChild(document.createElement('script')).innerHTML = pcScript;
  }
}

// 如果需要在初始化时立即注入，可以在插件初始化函数里调用这个方法
initPlugin() {
  addHTMLScripts();
}

在这个例子中，我们首先检查是否为移动端，然后根据结果动态添加不同的脚本。对于PC端，使用了现代浏览器支持的模块化脚本（如果支持）以及老版本浏览器的兼容脚本。