2018 version of PWA apple-touch-startup-image media queries?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
After reading:
Multiple "apple-touch-startup-image" resolutions for iOS web app (esp. for iPad)?
In that post's comments, Marconi's 'definitive' solution uses:
apple-touch-startup-image-2048x1496.png in:
<!-- iPad (Retina, landscape) SPLASHSCREEN-->
<link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
whereas https://medium.com/appscope/adding-custom-ios-splash-screens-to-your-progressive-web-app-41a9b18bdca3
uses:
apple-launch-1536x2048.png in:
<!-- 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">
(a 40px difference)
Further, the medium article says the png has to be the "exact same resolution as the iOS device that uses the app". And the article also doesn't mention portrait/landscape orientation? Is that media query now redundant?
Can anyone share a tested 2018 solution that includes portrait/landscape orientation and all iPhones and iPads?
c# ios asp.net html5 progressive-web-apps
asked Nov 17 '18 at 1:17
user1946932user1946932
164121
add a comment |
After reading:
Multiple "apple-touch-startup-image" resolutions for iOS web app (esp. for iPad)?
In that post's comments, Marconi's 'definitive' solution uses:
apple-touch-startup-image-2048x1496.png in:
<!-- iPad (Retina, landscape) SPLASHSCREEN-->
<link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
whereas https://medium.com/appscope/adding-custom-ios-splash-screens-to-your-progressive-web-app-41a9b18bdca3
uses:
apple-launch-1536x2048.png in:
<!-- 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">
(a 40px difference)
Further, the medium article says the png has to be the "exact same resolution as the iOS device that uses the app". And the article also doesn't mention portrait/landscape orientation? Is that media query now redundant?
Can anyone share a tested 2018 solution that includes portrait/landscape orientation and all iPhones and iPads?
c# ios asp.net html5 progressive-web-apps
asked Nov 17 '18 at 1:17
user1946932user1946932
164121
Please edit the question to be on-topic: include a Minimal, Complete, and Verifiable example that duplicates the problem. Questions seeking debugging help ("why isn't this code working the way I want?") must include: (1) the desired behavior, (2) a specific problem or error and (3) the shortest code necessary to reproduce it in the question itself. Please also see: What topics can I ask about here?, and How to Ask
– Mr.Rebot
Nov 20 '18 at 6:44
add a comment |
After reading:
Multiple "apple-touch-startup-image" resolutions for iOS web app (esp. for iPad)?
In that post's comments, Marconi's 'definitive' solution uses:
apple-touch-startup-image-2048x1496.png in:
<!-- iPad (Retina, landscape) SPLASHSCREEN-->
<link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
whereas https://medium.com/appscope/adding-custom-ios-splash-screens-to-your-progressive-web-app-41a9b18bdca3
uses:
apple-launch-1536x2048.png in:
<!-- 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">
(a 40px difference)
Further, the medium article says the png has to be the "exact same resolution as the iOS device that uses the app". And the article also doesn't mention portrait/landscape orientation? Is that media query now redundant?
Can anyone share a tested 2018 solution that includes portrait/landscape orientation and all iPhones and iPads?
c# ios asp.net html5 progressive-web-apps
asked Nov 17 '18 at 1:17
user1946932user1946932
164121
After reading:
Multiple "apple-touch-startup-image" resolutions for iOS web app (esp. for iPad)?
In that post's comments, Marconi's 'definitive' solution uses:
apple-touch-startup-image-2048x1496.png in:
<!-- iPad (Retina, landscape) SPLASHSCREEN-->
<link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
whereas https://medium.com/appscope/adding-custom-ios-splash-screens-to-your-progressive-web-app-41a9b18bdca3
uses:
apple-launch-1536x2048.png in:
<!-- 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">
(a 40px difference)
Further, the medium article says the png has to be the "exact same resolution as the iOS device that uses the app". And the article also doesn't mention portrait/landscape orientation? Is that media query now redundant?
Can anyone share a tested 2018 solution that includes portrait/landscape orientation and all iPhones and iPads?
c# ios asp.net html5 progressive-web-apps
c# ios asp.net html5 progressive-web-apps
asked Nov 17 '18 at 1:17
user1946932user1946932
164121
asked Nov 17 '18 at 1:17
user1946932user1946932
164121
edited Nov 21 '18 at 8:34
user1946932
asked Nov 17 '18 at 1:17
user1946932user1946932
164121
asked Nov 17 '18 at 1:17
user1946932user1946932
164121
asked Nov 17 '18 at 1:17
user1946932user1946932
164121
164121
Please edit the question to be on-topic: include a Minimal, Complete, and Verifiable example that duplicates the problem. Questions seeking debugging help ("why isn't this code working the way I want?") must include: (1) the desired behavior, (2) a specific problem or error and (3) the shortest code necessary to reproduce it in the question itself. Please also see: What topics can I ask about here?, and How to Ask
– Mr.Rebot
Nov 20 '18 at 6:44
add a comment |
Please edit the question to be on-topic: include a Minimal, Complete, and Verifiable example that duplicates the problem. Questions seeking debugging help ("why isn't this code working the way I want?") must include: (1) the desired behavior, (2) a specific problem or error and (3) the shortest code necessary to reproduce it in the question itself. Please also see: What topics can I ask about here?, and How to Ask
– Mr.Rebot
Nov 20 '18 at 6:44
Please edit the question to be on-topic: include a Minimal, Complete, and Verifiable example that duplicates the problem. Questions seeking debugging help ("why isn't this code working the way I want?") must include: (1) the desired behavior, (2) a specific problem or error and (3) the shortest code necessary to reproduce it in the question itself. Please also see: What topics can I ask about here?, and How to Ask
– Mr.Rebot
Nov 20 '18 at 6:44
Please edit the question to be on-topic: include a Minimal, Complete, and Verifiable example that duplicates the problem. Questions seeking debugging help ("why isn't this code working the way I want?") must include: (1) the desired behavior, (2) a specific problem or error and (3) the shortest code necessary to reproduce it in the question itself. Please also see: What topics can I ask about here?, and How to Ask
– Mr.Rebot
Nov 20 '18 at 6:44
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53347329%2f2018-version-of-pwa-apple-touch-startup-image-media-queries%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53347329%2f2018-version-of-pwa-apple-touch-startup-image-media-queries%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Please edit the question to be on-topic: include a Minimal, Complete, and Verifiable example that duplicates the problem. Questions seeking debugging help ("why isn't this code working the way I want?") must include: (1) the desired behavior, (2) a specific problem or error and (3) the shortest code necessary to reproduce it in the question itself. Please also see: What topics can I ask about here?, and How to Ask
– Mr.Rebot
Nov 20 '18 at 6:44