XF 1.4 Responsive logo change not happening on iPhone 6

[Mr Lucky]

I have my forum logos set so the main logo shows on browser widths above 480px (that is the setting for narrow responsive)

<xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveNarrowWidth) {
        #logo {
        display: none;
        }            
           }
</xen:if>

Narrower than that that a smaller logo shows instead:

.mobilelogo
{display:none}
@media only screen and (max-device-width:480px)
{.mobilelogo
{display:initial;max-width:100%;height:auto;}
}

This all seems to work fine, testing on various mobiles (and Firefox responsive tool)

Except on safari iPhone 6 plus - both logos are showing together.

Can anyone explain why this might be happening?

Thanks.

 

[tommydamic68]

I have my forum logos set so the main logo shows on browser widths above 480px (that is the setting for narrow responsive)

<xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveNarrowWidth) {
        #logo {
        display: none;
        }           
           }
</xen:if>

Narrower than that that a smaller logo shows instead:

.mobilelogo
{display:none}
@media only screen and (max-device-width:480px)
{.mobilelogo
{display:initial;max-width:100%;height:auto;}
}

This all seems to work fine, testing on various mobiles (and Firefox responsive tool)

Except on safari iPhone 6 plus - both logos are showing together.

Can anyone explain why this might be happening?

Thanks.

I believe you need to make these adjustments for the iPhone 6

iPhone 6:375px (portrait), 667px (landscape)
iPhone 6Plus:414 (portrait), 736px (landscape)