Consider supporting `resolution: Ndppx` media query instead of `-webkit-device-pixel-ratio: N`

[scottohara]

For apple-touch-startup-image links, pwa-asset-generator produces media queries that target specific device pixel ratios using the non-standard -webkit-device-pixel-ratio: ${scaleFactor} media feature, e.g.

<link
 rel="apple-touch-startup-image"
 href="images/apple-splash-2048-2732.png"
 media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>

This has worked perfectly well for many years (and continues to work exactly as intended), across all versions of Safari.

Since version 16, Safari added support for the resolution: ${scaleFactor}dppx media feature from the Media Queries Level 4 spec (and it's close relatives min-resolution and max-resolution). These provide an equivalent, but standards-compliant alternative to the non-standard, vendor prefixed -webkit-device-pixel-ratio.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution

It may be worth considering supporting this new way of targeting specific pixel densities, even if initially via an opt-in CLI argument (for example: --prefer-resolution). This would allow PWA developers targeting Safari 16+ to prefer the standards-compliant version over the non-standard version.

(Note that I am making an assumption here that for the purpose of apple-touch-startup-image, Safari considers -webkit-device-pixel-ratio: 2 and resolution: 2dppx to be analogous)