[Resolved] iphone 6+ responsive image

Home Forums Support [Resolved] iphone 6+ responsive image

Home Forums Support iphone 6+ responsive image

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #108714
    Webmaster

    http://bit.ly/1PuBR0E

    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…

    http://quirktools.com/screenfly/
    http://mobiletest.me

    #108728
    Webmaster
    #108756
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #109021
    Webmaster

    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…

    #109068
    Tom
    Lead Developer
    Lead Developer

    It’s working on iPhone 5? The same page?

    #109069
    Webmaster

    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.

    #109159
    Tom
    Lead Developer
    Lead Developer

    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');
          }
    }
    #109515
    Webmaster

    Thanks for the idea. Excellent!

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.