Multiple “apple-touch-startup-image” resolutions for iOS web app (esp. for iPad)?

by

definitive solution for startup-image and touch-icons for iPad and iPhone (landscape || portrait) and (retina || not):

        <!-- iPhone ICON -->
        <link href="https://stackoverflow.com/questions/4687698/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="http://stackoverflow.com/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="http://stackoverflow.com/images/favicon/1242x2208.png" media="(device-width: 414px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />

More Related Contents:

  1. How can I check if an app is installed from a web-page on an iPhone
  2. iPad Safari scrolling causes HTML elements to disappear and reappear with a delay
  3. ipad safari: disable scrolling, and bounce effect?
  4. Force link to open in mobile safari from a web app with javascript
  5. iPad Safari – Make keyboard disappear
  6. How can I autoplay media in iOS >= 4.2.1 Mobile Safari?
  7. Debug iPad Safari with a PC
  8. iPad Safari mobile seems to ignore z-indexing position for html5 video elements
  9. AVURLAsset refuses to load video
  10. Does iPhone/iPad Safari require ‘Accept-Ranges’ header for video?
  11. iPad Safari: How to disable the quick blinking effect when a link has been hit
  12. How to open Safari from a WebApp in iOS 7
  13. HTML5 Video tag not working in Safari , iPhone and iPad
  14. detect ipad/iphone webview via javascript
  15. UIButton Image + Text IOS
  16. What are the sizes used for the iOS application splash screen?
  17. iOS: Access app-info.plist variables in code
  18. Tap pressure strength detection using accelerometer
  19. why [response expectedContentLength] always return -1
  20. Max/Min Scale of Pinch Zoom in UIPinchGestureRecognizer – iPhone iOS
  21. iOS Pinch Scale and Two Finger Rotate at same time
  22. How to get the scroll bar with CSS overflow on iOS
  23. iOS: Disable Autorotation for a Subview
  24. Disable Dictation button on the keyboard of iPhone 4S / new iPad
  25. Alternatives For iOS Development Under Windows [duplicate]
  26. How to use a ‘Container View’ in iOS?
  27. UITableView backgroundColor always gray on iPad
  28. Existing iOS form framework
  29. Switch universal app to iPhone only app
  30. Interface orientation in iOS 6.0

Leave a Comment