Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

[feature request] Add possibility of adding several splash screens resolutions #246

Open
adeptofvoltron opened this issue Feb 15, 2020 · 0 comments
Labels
web-app-manifest Web App Manifests

Comments

@adeptofvoltron
Copy link

adeptofvoltron commented Feb 15, 2020

In iPhone splash screen is displayed only when icon resolution properly fits the phone resolution.

What I would like to achieve

possibility to add multiple splash screen icons, using media-query. It will look in code like that:

<!-- iPhone Xs Max (1242px x 2688px) --> 
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" href="/apple-launch-1242x2688.png"> 
<!-- iPhone Xr (828px x 1792px) --> 
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-828x1792.png"> 
<!-- iPhone X, Xs (1125px x 2436px) --> 
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="/apple-launch-1125x2436.png"> 
<!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus (1242px x 2208px) --> 
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" href="/apple-launch-1242x2208.png"> 
<!-- iPhone 8, 7, 6s, 6 (750px x 1334px) --> 
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-750x1334.png">  
<!-- iPad Pro 12.9" (2048px x 2732px) --> 
<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-2048x2732.png"> 
<!-- iPad Pro 11” (1668px x 2388px) --> 
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-1668x2388.png"> 
<!-- iPad Pro 10.5" (1668px x 2224px) --> 
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-1668x2224.png"> 
<!-- iPad Mini, Air (1536px x 2048px) --> 
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-1536x2048.png">

** how it works now**
At the moment there is always added only one splash screen icon. You use the smallest icon added to "icons array". The code responsible for that is here:

<?php if ( ! empty( $icon ) ) : ?>
<link rel="apple-touch-startup-image" href="<?php echo esc_url( $icon['src'] ); ?>">
<?php endif; ?>

how to achieve that?
In place mention above walk through all the icons..choose once with correct resolution, and add them all.

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
web-app-manifest Web App Manifests
Projects
None yet
Development

No branches or pull requests

2 participants