iPhone 6+ Responsive Image Viewport Bug (Unsemantic Grid)

307 Views Asked by Uncle Iroh At 18 May 2015 at 23:44

Here is the website: http://ch3.elance.website/en/

May you please help me fix the responsive images on iPhone6? What CSS is missing? Is this an unsemantic grid iPhone 6+ responsive image bug only?

When I test website on every other viewport, it's good. When my brother launched up his iPhone 6+ the images where not responsive. Using browser stack, I confirmed the issue.

Here are the sites I usually launch up to test viewport:

http://quirktools.com/screenfly/
http://mobiletest.me
Native F12 Chrome Inspect Element

Here are three screenshots my brother sent me from his iPhone 6 using the Power + Home Button technique. If you visit the website in any of the above viewport tools, the site looks like it is working perfectly.

enter image description here

Original Q&A

There are 2 best solutions below

Sean Stopnik On 19 May 2015 at 00:13

This is not an iPhone 6 Plus thing... this is a mobile thing. It doesn't look like you've set your viewport intial-scale in the head.

<meta name="viewport" content="initial-scale=1">

Try that.

Loegic On 26 May 2015 at 14:03

As @SeanStopnik suggested, you should add the meta tag in your html code :

<html>    
    <head>
        <meta name="viewport" content="width = device-width, initial-scale=1" />
    </head>
</html>

The viewport tag was invented by Apple for the iPhone

You can find more information here

iPhone 6+ Responsive Image Viewport Bug (Unsemantic Grid)

There are 2 best solutions below

Related Questions in CSS

Related Questions in RESPONSIVE-DESIGN

Related Questions in VIEWPORT

Related Questions in IPHONE-6

Related Questions in 960.GS

Trending Questions

Popular # Hahtags

Popular Questions