Nuxt PWA iOS设备启动屏不显示问题：标签冲突排查与自定义启动屏配置咨询

Hey there, let's tackle your iOS splash screen problems and answer your questions clearly:

1. Do the two sets of <link> tags conflict? #

Absolutely, they do conflict—and this is likely why your custom splash screens still aren't showing up. Here's why:

• iOS uses the media queries in apple-touch-startup-image tags to pick the most appropriate splash screen for the device. When multiple tags match the device's specs (like your iPhone 6 case), iOS will prioritize based on specificity and the order of the tags.
• The Nuxt-generated tags lack the orientation condition your custom tags include, but they still match the core device width/height/ratio. Since Nuxt injects these tags automatically, they might appear earlier in the <head> and get picked by iOS before your correct custom ones.
• Additionally, Nuxt's tags have a data-hid attribute, which Nuxt uses to manage head tag uniqueness. This could lead to unexpected overrides or prevent your custom tags from being recognized properly.

2. Can I disable Nuxt PWA's automatic splash screen generation and use pwa-asset-generator instead? #

Yes, you absolutely can—and this is the cleanest solution to fix your issue. Here's how to set it up:

Step 1: Disable Nuxt PWA's splash screen generation #

In your nuxt.config.js, update the PWA module configuration to turn off automatic splash screen creation:

export default {
  pwa: {
    icon: {
      splash: {
        enabled: false // This disables auto-generated splash screens and their tags
      }
    }
  }
}

Step 2: Add your custom splash screen tags manually #

Keep using pwa-asset-generator to generate your correct splash screen images, then place the generated ios folder in Nuxt's static directory (so the images are accessible at /ios/... after build).

Then add your custom <link> tags directly to the head section in nuxt.config.js:

export default {
  head: {
    link: [
      // Add all your pwa-asset-generator generated tags here
      {
        rel: 'apple-touch-startup-image',
        href: '/ios/apple-splash-750-1334.png',
        media: '(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)'
      },
      // ... add the rest of your custom tags
    ],
    meta: [
      // Keep your existing PWA meta tags
      { name: 'mobile-web-app-capable', content: 'yes' },
      { name: 'apple-touch-fullscreen', content: 'yes' },
      { name: 'apple-mobile-web-app-capable', content: 'yes' }
    ]
  }
}

Step 3: Test properly (critical for iOS!) #

iOS caches PWA assets aggressively, so make sure to:

• Delete the PWA from your iOS device completely
• Clear Safari's cache
• Re-add the PWA to your home screen
• Test again

Bonus: Fixing Nuxt's Incorrect Splash Screen Size (if you want to stick with Nuxt's generator) #

If you'd prefer to use Nuxt's built-in generator instead of switching tools, the 50x1334 size issue is likely a bug in the module or a misconfiguration. Check that your source icon (the one you provide to Nuxt PWA) is large enough (at least 1024x1024px) and that you're using the latest version of the Nuxt PWA module. Updating the module might resolve the incorrect resizing bug.

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