Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

Splash Screen not showing in landscape on iOS 12.4 #18

Closed
ecjs opened this issue Aug 19, 2019 · 4 comments · Fixed by #19
Closed

Splash Screen not showing in landscape on iOS 12.4 #18

ecjs opened this issue Aug 19, 2019 · 4 comments · Fixed by #19
Assignees
@onderceylan
Labels
bug Something isn't working released

Comments

@ecjs
Copy link

ecjs commented Aug 19, 2019

First of all: awesome package. Such a good idea!

In order for me to get splash screens to work on (2) separate iOS devices (iPhone XS Max + iPad mini) both running iOS 12.4, I had to add and (orientation: landscape) as well as maintaining the device-width and device-height dimensions as its portrait counterpart.

For instance, this got landscape working on my iPhone XS Max:

<link
  rel="apple-touch-startup-image"
  href="/static/images/splash/apple-splash-1242-2688.png"
  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
/>
<link
  rel="apple-touch-startup-image"
  href="/static/images/splash/apple-splash-2688-1242.png"
  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
/>

This is what was generated by this package (only portrait works):

<link rel="apple-touch-startup-image" href="apple-splash-1242-2688.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)">
<link rel="apple-touch-startup-image" href="apple-splash-2688-1242.png" media="(device-width: 896px) and (device-height: 414px) and (-webkit-device-pixel-ratio: 3)">

You would think that the way landscape meta tags are currently generated would be fine... Thanks Apple
@onderceylan
Copy link
Collaborator

Hey @ecjs, thanks a lot for your feedback and detailed issue explanation! I totally missed out orientation in the query, I’m going to fix it and publish a release asap.

@ecjs
Copy link
Author

ecjs commented Aug 19, 2019

No problem! While you are at it, you may want to add iPad Pro (12.9")!

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

@onderceylan
Copy link
Collaborator

Sure, I will look into it! Thanks

@onderceylan onderceylan added the bug Something isn't working label Aug 19, 2019
@onderceylan onderceylan self-assigned this Aug 19, 2019
onderceylan added a commit that referenced this issue Aug 19, 2019
@onderceylan
fix: fixed iPad 12.9" specs being stripped out and added orientation …
59a891a 
…key to the media queries

fixed iPad 12.9" specs being stripped out and added orientation key to the media queries

fix #18
@onderceylan onderceylan mentioned this issue Aug 19, 2019
Merged
onderceylan added a commit that referenced this issue Aug 19, 2019
@onderceylan
Merge pull request #19 from onderceylan/dev
fe9180e 
fix #18
onderceylan pushed a commit that referenced this issue Aug 19, 2019
@semantic-release-bot
chore(release): 1.1.4 [skip ci]
f022121 
## [1.1.4](v1.1.3...v1.1.4) (2019-08-19)

### Bug Fixes

* **cli:** fixed wrong url on help text ([6cc6e22](6cc6e22)), closes [#11](#11)
* fixed iPad 12.9" specs being stripped out and added orientation key to the media queries ([59a891a](59a891a)), closes [#18](#18)
* **puppets:** fixed the check where scraping result is evaluated ([b584be0](b584be0))
@onderceylan
Copy link
Collaborator

🎉 This issue has been resolved in version 1.1.4 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@onderceylan onderceylan

Labels
bug Something isn't working released
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix #18 elegantapp/pwa-asset-generator
2 participants
@onderceylan @ecjs