iOS 웹 앱 (특히 iPad 용)에 대한 여러 "apple-touch-startup-image"해상도?
HTML5 기반 iOS 웹 애플리케이션을 작성했는데 모두 잘 작동하는 것 같지만 여러 시작 화면을 사용하여 개선하려고합니다. iPhone / iPod touch는 다음과 같이 320x460 PNG에서 잘 작동합니다.
<link rel="apple-touch-startup-image" href="img/startup_screen-320x460.png" />
iPhone / iPod touch와 같이 iPad의 시작 이미지는 768x1004 (세로) 또는 1024x748 (가로) 해상도를 제공하는 상태 표시 줄을 수용하기 위해 높이에서 20px를 줄여야한다는 많은 문서를 찾았습니다. 그러나 내 테스트에서 (현재 iOS 3.2.2를 실행하는 iPad에서) 768x1004 (세로) 해상도 만 작동하지만 가로 모드에서는 20px가 너무 좁습니다.
나는 다음 ( apple-touch-icon링크 의 기능을 기반으로 한 거친 추측)을 시도했지만 아무 소용이 없습니다.
<link rel="apple-touch-startup-image" href="img/startup_screen-320x460.png" />
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/startup_screen-1024x748.png" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/startup_screen-768x1004.png" />
link나열된 마지막 요소 인 경우 768x1004 해상도 이미지 만 작동합니다 . 1024x748 해상도 이미지가 마지막이면 회색 배경이 대신 렌더링됩니다 (768x1004는 아님). 따라서 분명히 속성을 apple-touch-startup-image link지원하지 않습니다 sizes.
최신 버전의 iOS에서 지원됩니까? 여러 시작 이미지를 지원하는 방법이 있습니까? 1024x768 시작 이미지를 만들어야합니까? 그렇다면 iPhone / iPod touch 용으로 축소됩니까? 아니면 포기하고 iPad 용 시작 이미지가 없어야합니까?
iPad 및 iPhone (가로 || 세로) 및 (망막 || 아님)의 시작 이미지 및 터치 아이콘을 위한 확실한 솔루션 :
<!-- iPhone ICON -->
<link href="apple-touch-icon-57x57.png" sizes="57x57" rel="apple-touch-icon">
<!-- iPad ICON-->
<link href="apple-touch-icon-72x72.png" sizes="72x72" rel="apple-touch-icon">
<!-- iPhone (Retina) ICON-->
<link href="apple-touch-icon-114x114.png" sizes="114x114" rel="apple-touch-icon">
<!-- iPad (Retina) ICON-->
<link href="apple-touch-icon-144x144.png" sizes="144x144" rel="apple-touch-icon">
<!-- iPhone SPLASHSCREEN-->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) SPLASHSCREEN-->
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (portrait) SPLASHSCREEN-->
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
<!-- iPad (landscape) SPLASHSCREEN-->
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
<!-- iPad (Retina, portrait) SPLASHSCREEN-->
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- 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">
<!-- iPhone 6/7/8 -->
<link href="/images/favicon/750x1334.png" media="(device-width: 375px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!-- iPhone 6 Plus/7 Plus/8 Plus -->
<link href="/images/favicon/1242x2208.png" media="(device-width: 414px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
실제로 가로 모드에서 작동하도록했습니다. 여기에 정보가 있습니다 : https://gist.github.com/472519 .
문제는 가로 이미지가 1024x748 대신 748x1024 (가로 이미지, 시계 방향으로 회전) 여야한다는 것입니다.
또한 앱을 먼저 세로 모드로 시작한 다음 가로 모드로 실행해야했습니다.
실제로 효과가있는 답변의 조합을 제공하고 싶었습니다. 선택한 답변으로 스플래시 이미지의 레티 나 버전이 사용되지 않는 것으로 나타났습니다. Pavel의 대답은 iPad의 레티 나 버전을 수정했습니다. 다음은 iPhone (Retina 및 non-retina) 및 iPad (retina 및 non-retina)에서 테스트되었습니다.
<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<!-- For iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- iPhone SPLASHSCREEN-->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) SPLASHSCREEN-->
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 460px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 5 (Retina) SPLASHSCREEN-->
<link href="apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (non-Retina) (Portrait) -->
<link href="apple-touch-startup-image-768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" rel="apple-touch-startup-image" />
<!-- iPad (non-Retina) (Landscape) -->
<link href="apple-touch-startup-image-1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" rel="apple-touch-startup-image" />
<!-- iPad (Retina) (Portrait) -->
<link href="apple-touch-startup-image-1536x2008.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!-- iPad (Retina) (Landscape) -->
<link href="apple-touch-startup-image-2048x1496.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
나는 이것에 대해 공로를 인정할 수 없지만이 구성은 작동합니다. 복사하여 붙여 넣기 만하면 이미지가 이름에 지정된 크기와 정확히 일치하는지 확인하십시오.
하나의 링크 요소에 미디어 속성이 없으면 일이 작동하지 않았습니다. 이 코드는 iPhone 3G 및 iPad (세로 및 가로 모드)에서 실행 이미지를 성공적으로 표시했습니다.
<-- iPad - landscape (748x1024) -->
<link rel="apple-touch-startup-image" href="images/ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<-- iPad - portrait (768x1004) -->
<link rel="apple-touch-startup-image" href="images/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
<-- iPhone - (320x460) -->
<link rel="apple-touch-startup-image" href="images/iphone-lowres.png" media="screen and (min-device-width: 200px) and (max-device-width: 320) and (orientation:portrait)" />
iPhone4 (고해상도)에서는 시도해 볼 수 없었지만 대부분 동일한 방식으로 작동합니다.
분명히 시작 화면은 다음 조건에서만 작동합니다.
1) 장치에 필요한 정확한 크기 여야합니다. 2) 앱이 실행될 때 기기가 세로 방향이어야합니다. 3) 일부 소스는 png로만 말하지만 jpg는 이제 작동하는 것 같습니다.
가장 완벽한 요점 솔루션 : https://gist.github.com/tfausak/2222823
새로운 iPad (Retina) 용 스플래시 화면을 만드는 방법을 알아 내느라 시간을 보냈습니다. 여기에 새로운 iPad (Retina)의 두 방향에 대해 테스트되고 작동하는 솔루션이 있습니다.
PS를 게시하기 전에 이미 주어진 솔루션을 테스트했지만 작동하지 않았습니다.
<!-- iPad (Retina) (Portrait) -->
<link href="/img/ios/apple-touch-startup-image-1536x2008.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!-- iPad (Retina) (Landscape) -->
<link href="/img/ios/apple-touch-startup-image-2048x1496.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
이것은 일부 사람들에게는 분명 할 수 있지만 홈 화면에 바로 가기를 추가하고 거기에서 실행하고 다음 코드가 없으면 시작 이미지가 작동하지 않습니다.
<meta name="apple-mobile-web-app-capable" content="yes" />
이 페이지는이 모든 것을 파악하는 데 유용했습니다. http://lineandpixel.com/blog/ios-web-app-icons-and-startup-images
iPhone / iPad / iPhoneRetina에서 웹앱을위한 4 개의 개별 시작 이미지를 얻을 수 있었던 방법은 몇 가지의 조합이었습니다.
비 Retina iPhone (320x460) :
<link rel="apple-touch-startup-image" href="startup-iphone.jpg" />
Retina iPhone (4 및 4S) (640x920) : 위에 게시 된 Javascript 기술을 사용하십시오. http://www.paulofierro.com/archives/568/
iPad (양쪽 방향)는 까다 롭습니다. 가로는 748w x 1024h 여야하며 '하단'은 왼쪽입니다. 세로는 768w x 1004h 여야하며 '하단'이 하단입니다. 사용자 에이전트에서 iPad를 감지하여 PHP를 통해 iPad 태그를 포함해야했습니다. 그렇지 않으면 비 레티 나 iPhone 시작 이미지가로드되지 않습니다. 다음은 코드입니다 ...
<?php $isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad'); ?>
<?php if ($isiPad) { ?>
<link rel="apple-touch-startup-image" href="startup-landscape.jpg" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<link rel="apple-touch-startup-image" href="startup-portrait.jpg" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
<?php } ?>
위의 작업을 수행하면 내 웹 앱 (실제로는 현재 오프라인에서 작업중인 간단한 워드 프레스 블로그 사이트)이 iPhone, Retina 및 두 iPad 방향 모두에 대한 시작 이미지를 가질 수 있습니다. 최신 iOS 4를 실행하는 iPhone 3G, iPad 및 iPhone 4에서 모두 최신 iOS 5를 실행하는 것으로 테스트되었습니다.
물론 자바 스크립트를 통해 iPad 코드를 포함 할 수도 있습니다. ㅋㅋ
나는 여러 번 테스트를 해봤지만, 이제는 당신이 이렇게 행동 할 때 작동한다고 확신합니다. 먼저 패드를 세로로 잡고, 앱을 연 다음, 앱을 가로로 잡고, 앱을 엽니 다. 짜증나지만 ... 이것이 그것을 만드는 유일한 방법 인 것 같습니다. 버그를 "잠금 해제"하려면 먼저 패드 초상화를 잡아야합니다.
완전한 메타 :
<!-- Icons -->
<!-- iOS 7 iPad (retina) -->
<link href="icon-152x152.png"
sizes="152x152"
rel="apple-touch-icon">
<!-- iOS 6 iPad (retina) -->
<link href="icon-144x144.png"
sizes="144x144"
rel="apple-touch-icon">
<!-- iOS 7 iPhone (retina) -->
<link href="icon-120x120.png"
sizes="120x120"
rel="apple-touch-icon">
<!-- iOS 6 iPhone (retina) -->
<link href="icon-114x114.png"
sizes="114x114"
rel="apple-touch-icon">
<!-- iOS 7 iPad -->
<link href="icon-76x76.png"
sizes="76x76"
rel="apple-touch-icon">
<!-- iOS 6 iPad -->
<link href="icon-72x72.png"
sizes="72x72"
rel="apple-touch-icon">
<!-- iOS 6 iPhone -->
<link href="icon-57x57.png"
sizes="57x57"
rel="apple-touch-icon">
<!-- Startup images -->
<!-- iOS 6 & 7 iPad (retina, portrait) -->
<link href="startup-image-1536x2008.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: portrait)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iOS 6 & 7 iPad (retina, landscape) -->
<link href="startup-image-1496x2048.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iOS 6 iPad (portrait) -->
<link href="startup-image-768x1004.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: portrait)
and (-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
<!-- iOS 6 iPad (landscape) -->
<link href="startup-image-748x1024.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
<!-- iOS 6 & 7 iPhone 5 -->
<link href="startup-image-640x1096.png"
media="(device-width: 320px) and (device-height: 568px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iOS 6 & 7 iPhone (retina) -->
<link href="startup-image-640x920.png"
media="(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iOS 6 iPhone -->
<link href="startup-image-320x460.png"
media="(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
iPhone 6 및 iPhone 6+
<link href = "launch6.png"media = "(device-width : 375px)"rel = "apple-touch-startup-image"> <link href = "launch6plus.png"media = "(device-width : 414px)"rel = "apple-touch-startup-image">
이 링크에서 : http://www.mobilexweb.com/blog/safari-ios8-iphone6-web-developers-designers
이 답변은 현재 iOS에 필요한 스플래시 화면 20 개 모두 + iOS 12.1 용 최신 HTML 마크 업 을 생성 하는 편리한 방법을 제공합니다 .
여기에는 iPhone XR, iPhone XS Max 및 11 형 iPad Pro 용 솔루션이 포함됩니다.
문맥
iOS의 Safari는 이제 Progressive Web Apps를 지원하지만 Chrome과는 다르게 구현합니다. manifest파일을 읽지 만 그 안에 선언 된 아이콘은 무시합니다.
대신 Safari는 apple-touch-startup-image태그 목록을 예상 합니다. 하지만 공식 애플 문서는 이 예를 나열 :
<link rel="apple-touch-startup-image" href="/launch.png">
... (적어도 iOS 12.1부터) 하나의 이미지로는 충분하지 않고 작동하지 않기 때문에 오해의 소지 가 있습니다. 대신 Safari는 해상도 당 하나의 이미지를 예상합니다.
스플래시 화면이 없거나 잘못된 경우 로드시 흰색 화면이 표시되어 전문가답지 않고 (웹) 앱이 느리게 느껴집니다.
스플래시 화면 생성
온라인 에는 apple-touch-startup-image 생성기가 있지만 깨지거나 Landscape를 모두 무시하고 이름 지정 규칙이 그다지 좋지는 않습니다. 이것은 더 쉽습니다.
logo.png파일이 포함 된 디렉토리의 bash에서 다음 명령을 실행하면 Safari에서 예상하는 20 개의 이미지가 생성됩니다 (세로 및 가로 각각에 대해 10 개의 해상도).
array=( 0640x1136 0750x1334 0828x1792 1125x2436 1242x2208 1242x2688 1536x2048 1668x2224 1668x2388 2048x2732 )
for i in "${array[@]}"
do
split=(${i//x/ })
portrait=$i
landscape=${split[1]}x${split[0]}
gm convert -background white -geometry $((10#${split[0]} / 5)) "logo.png" -gravity center -extent ${portrait} splash-portrait-${portrait}.png
gm convert -background white -geometry $((10#${split[0]} / 5)) "logo.png" -gravity center -extent ${landscape} splash-landscape-${landscape}.png
done
이것은 ImageMagick에 대한 더 나은 대안 인 GraphicsMagick에 의존합니다 . (macOS에서는 brew를 사용하여 brew install graphicsmagick.
마크 업
다음은 20 개 파일 모두에 대한 HTML 마크 업입니다.
<!--
# SPLASH SCREENS FOR iOS.
#
# If the splash screen is missing or incorrect, a white screen will show on load, which looks unprofessional
# and makes the (web)app feel slow.
#
# Constraints:
# - Cannot use a single image for all.
# - The size of the image must fit that of the targeted device, else no splash screen will show.
# - There seems to be some leeway (e.g.: pictures 40px and 60px shorter did work), but unclear how much.
# Bottom-line: you need one splash screen per resolution and orientation.
#
#
# List of devices and resolutions (AUG-2019):
#
# Device Portrait size Landscape size Screen size Pixel ratio
# iPhone SE 640px × 1136px 1136px × 640px 320px × 568px 2
# iPhone 8 750px × 1334px 1334px × 750px 375px × 667px 2
# iPhone 7 750px × 1334px 1334px × 750px 375px × 667px 2
# iPhone 6s 750px × 1334px 1334px × 750px 375px × 667px 2
# iPhone XR 828px × 1792px 1792px × 828px 414px × 896px 2
# iPhone XS 1125px × 2436px 2436px × 1125px 375px × 812px 3
# iPhone X 1125px × 2436px 2436px × 1125px 375px × 812px 3
# iPhone 8 Plus 1242px × 2208px 2208px × 1242px 414px × 736px 3
# iPhone 7 Plus 1242px × 2208px 2208px × 1242px 414px × 736px 3
# iPhone 6s Plus 1242px × 2208px 2208px × 1242px 414px × 736px 3
# iPhone XS Max 1242px × 2688px 2688px × 1242px 414px × 896px 3
# 9.7" iPad 1536px × 2048px 2048px × 1536px 768px × 1024px 2
# 7.9" iPad mini 4 1536px × 2048px 2048px × 1536px 768px × 1024px 2
# 10.5" iPad Pro 1668px × 2224px 2224px × 1668px 834px × 1112px 2
# 11" iPad Pro 1668px × 2388px 2388px × 1668px 834px × 1194px 2
# 12.9" iPad Pro 2048px × 2732px 2732px × 2048px 1024px × 1366px 2
#
# Sources:
# - Device and resolutions (Portrait size, Landscape size) from https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/launch-screen/
# - Screen width as measured by JavaScript's `screen.width` and `screen.height` in Simulator, except for:
# - 7.9" iPad mini 4 (not in Simulator): https://developer.apple.com/library/archive/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html
# - 9.7" iPad (not in Simulator): had to assume they meant iPad Pro.
#
#
# Tested on the following devices, in Simulator with iOS 12.1, in both Portrait and Landscape:
# iPhone 5s, iPhone 6, iPhone 6 Plus, iPhone 6s, iPhone 6s Plus, iPhone 7, iPhone 7 Plus, iPhone 8,
# iPhone 8 Plus, iPhone SE, iPhone X, iPhone XS, iPhone XS Max, iPhone XR, iPad Air, iPad Air 2,
# iPad (5th generation), iPad Pro (9.7-inch), iPad Pro (12.9-inch), iPad Pro (12.9-inch) (2nd generation),
# iPad Pro (10.5-inch), iPad (6th generation), iPad Pro (11-inch), iPad Pro (12.9-inch) (3rd generation).
# Everything worked fine (splash screen showing in every single case.)
#
# FYI:
# - tvOS does not come with a browser. So the largest screen to care for is an iPad.)
# - On all iPads (in Simulator), had to either Add to Home twice or restart the device to see the icon.
# WOULDDO Test on a real iPad.
-->
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-0640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-0750x1334.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-0828x1792.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1242x2208.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1242x2688.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="/assets/site/img/splash/splash-portrait-1536x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1668x2224.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1668x2388.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-2048x2732.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="/assets/site/img/splash/splash-landscape-1136x0640.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-1334x0750.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-1792x0828.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2436x1125.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2208x1242.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2688x1242.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2048x1536.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2224x1668.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2388x1668.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2732x2048.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
(Personally, I keep the comments in a Twig comment block so I get to keep the info without polluting the client's with too much text.)
Some examples I saw online used min-device-*, but this makes little sense in this context given Safari expects pictures in (near-)exact dimensions.
Some other examples I saw used shorter images (40 or 60px shorter, i.e. without the status bar). Older versions of iOS seem to have expected such dimensions, but this is no longer the case.
Parting thoughts
96% of my iOS users use iOS 12.x, so thankfully no need to care too much about older iOS versions. But if I missed something please let me know.
Where Android, like a big boy, is happy showing the app's icon as part of the splash screen, iOS and Safari force us through all this extra work. 20 images to show a simple splash screen! This is crazy! Things might get better in the future, but that's how it is for now.
This elementary task took a lot of coding and testing. I hope it'll help someone.
I'll try to keep this updated with newer resolutions. Please post a comment if you see one is missing.
10.2" iPad should be added...
// Device Portrait size Landscape size Screen size Ratio // 10.2" iPad 1620px × 2160px 2160px x 1620px 810px × 1080px 2
If you want to target the retina display I found a solution and blogged about it here: http://paulofierro.com/blog/2011/8/31/icons-and-splash-screens-for-ios-web-apps-retina-displays-also-welcome
Basically the sizes property and media queries will not work. You have to inject the high-res startup image via JavaScript once your page is loaded. Hacky but works.
'Development Tip' 카테고리의 다른 글
| Excel 열 문자를 숫자로 변환하는 알고리즘은 무엇입니까? (0) | 2020.12.10 |
|---|---|
| 지정된 날짜에서 연도 가져 오기 PHP (0) | 2020.12.10 |
| R을 사용하여 gz 파일 압축 해제 (0) | 2020.12.10 |
| Redis는 반복하지 않고 팝하지 않고 목록의 모든 값을 가져옵니다. (0) | 2020.12.10 |
| UIButton 이벤트. (0) | 2020.12.10 |