Archived topic
iphone 6+ responsive image
7 replies · Started by Webmaster on May 18, 2015
May you please help me fix the responsive images on iPhone6? According to Chrome plus similar view-port testing tools, the looks and works fine. When my brother launched up his iPhone 6+ the images where shot and broken up though. Using browser stack, I can confirm the issue.
What CSS is missing? Is this an unsemantic grid iPhone 6+ responsive image bug only? It appears as if all other view-ports work fine. Here are three screenshots he sent me from his iPhone 6 using the Power + Home Button technique.
According to these guys, the site looks great, but that's just not true apparently...
Looks to me like the background images just aren't working with the aspect ratio of the iPhone.
Background images are a pain to get to work perfectly with mobile screens depending on their aspect ratio. Sometimes it's necessary to set custom mobile background images to the sections on mobile.
iPhone/iOS doesn't support fixed background images either, which are what you're using for the parallax effect.
Another option for a site like this is to disable the mobile mode: https://wordpress.org/plugins/generate-disable-mobile/ - it may look better as it should keep the aspect ratios as they should be.
Let me know :)
Setting custom mobile bg images means using an @media query? Say, for example, these media queries on Stack?
The parallax image not compatible on iPhone 6 but it works on iPhone 5 and before? I say, that is something strange...
It's working on iPhone 5? The same page?
Almost 100% positive because during the production phase the client had an iPhone 5. When he upgraded his phone like a week or something ago, he mentioned it had a problem. I'm unable to check, I'm not a mobile phone user...
Thanks for pulling through with a response too btw.
Hmm, when I reduce my browser to mobile size, the background images look like they do in your screenshots above.
If you Google "background position fixed ios" - you'll see a bunch of stuff telling you how ios dislikes background:fixed (which is the base for the parallax effect).
For the images looking all weird on mobile, I definitely suggest mobile friendly backgrounds.
For example:
@media (max-width:768px) {
.my-custom-section-class {
background-image: url('URL TO MY MOBILE BG IMAGE');
}
}Thanks for the idea. Excellent!
