Another question on srcset not working but I've waded through the countless questions here and most of them seem to be either 'open your test in private window' or 'srcset doesn't work in that browser' kind of response.
I've checked both the above and still can't get my mobile portrait image to load consistently.
I'm working in FF and if I narrow the window to less than 769px, it displays correctly. If I use dev tools to emulate mobile it doesn't. Most importantly, if I open the codepen on my mobile in FF - it doesn't display the portrait image either. Similar results on Chrome.
Have I made a silly syntax error?
so here it is:
<img class=""
srcset="
https://via.placeholder.com/780x520/91b9c7?text=Standard+Desktop 780w,
https://via.placeholder.com/365x520/c49055/3e7a23&text=Mobile+Portrait 365w,
https://via.placeholder.com/1560x1040/c791c7/0011ff&text=Retina+Desktop 1560w"
sizes="
(max-width: 768px) 365px,
(max-width: 768px) and (orientation: portrait) 365px,
(min-width: 769px) and (orientation: landscape) 780px,
(-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) 1560px,
(min-resolution: 2dppx) and (orientation: landscape) 1560px,
365px"
alt="alt text here">
and here's a codepen: https://codepen.io/chrisby34/pen/gObyQZy
Not directly answering my own question but finding a solution by using a picture tag instead.
<picture class="" >
<source media="(max-width: 768px)" srcset="https://via.placeholder.com/780x520/91b9c7?text=Standard+Desktop">
<source media="(min-width: 769px) and (orientation: landscape)" srcset="https://via.placeholder.com/365x520/c49055/3e7a23&text=Mobile+Portrait">
<source media="(-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)" srcset="https://via.placeholder.com/1560x1040/c791c7/0011ff&text=Retina+Desktop">
<source media="(min-resolution: 2dppx) and (orientation: landscape)" srcset="https://via.placeholder.com/1560x1040/c791c7/0011ff&text=Retina+Desktop">
<img src="low-res.jpg" alt="alt text here">
</picture>
Related
I used iPhone 6 and 4 to check if another stylesheet is being applied. It did not. Here are my stylesheets:
<link rel="stylesheet" media="screen and (max-width: 800px)" href="mobileindex.css">
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="desktopindex.css">
Yes, there is a gap in them. That space is reserved for tablets later on. For some reason, the mobileindex.css wasn't applied with those settings. I have to switch orientation twice for it to appear. This, however, fixes the problem:
<link rel="stylesheet" media="screen and (max-width: 1000px)" href="mobileindex.css">
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="desktopindex.css">
Is 800px not enough for an iPhone 4 and 6? How come it works now? The page where this happened is msolonko.net.
Can you please add the media queries below your main style and after that check your Web Application in your Mobile device.
#media screen and (min-width:768px) and (max-width:1024px) {
/*Your Mobile Style will be here.*/
}
The main thing is that you are applying the wrong min-width and max-width for iPhone6 device. The real size of the iPhone6 for responsive design is below.
iPhone 6 Portrait
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
/*Your Mobile Style will be here.*/
}
iPhone 6 landscape
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {
/*Your Mobile Style will be here.*/
}
I've tried adding a startup screen to my application, but it doesn't work (neither from Safari, nor from home screen).
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<!-- Startup images -->
<!-- iOS iPad (retina, portrait) -->
<link rel="apple-touch-startup-image" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="images/apple-touch-startup-image-1536x2008.png">
<!-- iOS iPad (retina, landscape) -->
<link rel="apple-touch-startup-image" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="images/apple-touch-startup-image-1496x2048.png">
<!-- iOS iPad (portrait) -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="images/apple-touch-startup-image-768x1004.png">
<!-- iOS iPad (landscape) -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="images/apple-touch-startup-image-748x1024.png">
I open it on iPad with retina display. All images are accessible, and load via direct links normally. All landscape images are in portrait format and rotated 90 degrees clockwise. I also tried setting "width" for retina to 2048, with no luck.
Is there anything I missed?
Sources used:
Mulitple "apple-touch-startup-image" resolutions for iOS web app (esp. for iPad)?
Is there an equivalent apple-touch-startup-image for the IPAD?
https://miguelmota.com/blog/iphone-and-ipad-web-app-startup-images/
I'm looking into adding a splash screen for a WebApp in iOS8, however I just get a black rectangle instead of the splash image. An example I found online suffers from the same problem. (As seen here.) I've tried both on an iPad Air and an iPhone 5s. Is this a known bug, or am I doing something wrong?
<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/mikemai/assets/img/ios/l/apple-touch-startup-image-320x460.png"media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">
<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/mikemai/assets/img/ios/h/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/mikemai/assets/img/ios/h/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/mikemai/assets/img/ios/l/apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">
<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/mikemai/assets/img/ios/l/apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/mikemai/assets/img/ios/h/apple-touch-startup-image-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/mikemai/assets/img/ios/h/apple-touch-startup-image-1496x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
I was just working on a similar project: "building a WebApp" and went through the same headaches.
I have an iPhone 5S with iOS 8.1.1 and I just tested your third line with the 640px x 1096px picture successfully. I included once your whole code snippet and it worked aswell. I also went to your example page and it worked, too.
Unfortunately I don't have the link to the source, because I was just surfing the web but I can remember that one person had a problem with the line (your first line) for the iPhone 3. And as far as I can remember he had to put it at the end for no particular reason.
This is exactly the code I used for my test on line 3:
<link rel="apple-touch-startup-image"
href="https://s3.amazonaws.com/mikemai/assets/img/ios/h/apple-touch-startup-image-640x1096.png"
media="(device-width: 320px) and (device-height: 568px)
and (-webkit-device-pixel-ratio: 2)"/>
I would suggest to test it only with this line first and adding the rest step by step. Hope it helps to know that it works here :)
One last thought:
If you use a manifest file and you save the startup-image locally, you have to remove the WebApp and save to home screen again to reload the image or you have to update the manifest file aswell. Just in case the black rectangle got saved (not sure if it ever does).
In case you're interested, here is the meta for the title (keep it short):
<meta name="apple-mobile-web-app-title" content="Your WebApp Name" />
I've found myself in an odd situation where I've set up Splash screens in iOS for a web app that I'm building and have found myself not being able to exit it after starting it up/closing/restarting it up a couple of times. This bug seems to also prevent rebooting also, I'm able to recreate this on both an iPad 3 and iPad mini and was wondering if someone else is aware of this?
Essentially in doing so, it's caused:
You can't exit the application by tapping the home button, or long pressing it
Can't power off the iPad by holding down the off button!
The screen won't turn off
I'm using the latest iOS for each and currently seem to be stuck waiting them both to run out of power!
Here's the code I have setup for displaying Splash screens:
<link href="images/touch/splash/splash-320x480.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<link href="images/touch/splash/splash-640x960.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<link href="images/touch/splash/splash-640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<link href="images/touch/splash/splash-768x1024.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<link href="images/touch/splash/splash-1024x768.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<link href="images/touch/splash/splash-1536x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<link href="images/touch/splash/splash-2048x1636.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
I'm wondering if anybody else is able to recreate to confirm this issue? I wasn't seeing this until I added the Splash screens.
Edit: I was able to reset only by holding the power button and home button.
Edit 2: Now I've rebooted each of them I can't recreate the issue now. I'll keep trying but there doesn't seem to be any rhyme or reason as to what caused it on 2 separate devices.
I built a HTML5 webapp for iPad which used the splash screen for landscape and portrait mode.
I used the below link tags to get it to work.
<link media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="{{MEDIA_URL}}ipad/img/Default-Landscape.png" rel="apple-touch-startup-image"/>
<link media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="{{MEDIA_URL}}ipad/img/Default-Portrait.png" rel="apple-touch-startup-image"/>
The images work well for iPad1 and 2 however, with iPad3 the splash screen in landscape mode appears out of place, the portrait mode works okay. Do I have to use a different image for landscape mode or have to change the link tag?
Size for high-resolution iPad launch images (in pixels):
1536 x 2008 (portrait)
2048 x 1496 (landscape)
Source: apple
Add this to your media query:
and (-webkit-min-device-pixel-ratio: 2) to target the new iPad, e.g:
<link rel="apple-touch-startup-image" href="img/ipad-landscape-retina.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" />