如何实现PWA SPA应用按设备类型设置不同屏幕方向？

浏览器目前不支持通过<link rel="manifest">的media属性区分加载不同的manifest文件，所以你需要用JavaScript动态判断设备类型，再加载对应的manifest配置，同时也能实现不同设备的截图适配。

具体步骤 #

1. 准备两个Manifest文件

   • manifest-mobile.json（手机端）：

     {
       "name": "你的应用名称",
       "short_name": "应用简称",
       "orientation": "portrait",
       "screenshots": [
         {
           "src": "/screenshots/mobile-1.png",
           "sizes": "360x640",
           "type": "image/png"
         }
       ],
       // 其他通用配置（如start_url、display、theme_color等）
       "start_url": "/",
       "display": "standalone",
       "theme_color": "#ffffff"
     }
     

   • manifest-desktop.json（平板/桌面端）：

     {
       "name": "你的应用名称",
       "short_name": "应用简称",
       "orientation": "any",
       "screenshots": [
         {
           "src": "/screenshots/desktop-1.png",
           "sizes": "1920x1080",
           "type": "image/png"
         }
       ],
       // 其他通用配置与手机端保持一致
       "start_url": "/",
       "display": "standalone",
       "theme_color": "#ffffff"
     }
     

2. 用JS动态加载对应Manifest
   在页面的<head>中插入以下脚本，确保在浏览器解析manifest之前执行：

   // 移除页面中已有的manifest标签（如果存在）
   const existingManifest = document.querySelector('link[rel="manifest"]');
   if (existingManifest) {
     existingManifest.remove();
   }
   
   // 判断设备类型：这里以屏幕宽度767px作为手机/平板的分界，可根据需求调整
   const isMobile = window.matchMedia('(max-width: 767px)').matches;
   const targetManifest = isMobile ? '/manifest-mobile.json' : '/manifest-desktop.json';
   
   // 创建并添加新的manifest链接
   const manifestLink = document.createElement('link');
   manifestLink.rel = 'manifest';
   manifestLink.href = targetManifest;
   document.head.appendChild(manifestLink);
   

注意事项 #

• 设备判断逻辑可灵活调整：比如结合navigator.userAgent识别设备品牌，或者使用更贴合你应用适配需求的屏幕尺寸阈值。
• 脚本要尽可能早执行，建议放在<head>的最顶部（在任何现有manifest标签之后），避免浏览器先加载默认的manifest配置。
• 两个manifest文件的通用配置（如start_url、display等）保持一致，只修改orientation和screenshots这类设备相关字段即可。

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