CODEWITHSUNDEEP
cssresponsive-designviewportiphone-6960.gs
Uncle Iroh
Uncle Iroh

Reputation: 386

iPhone 6+ Responsive Image Viewport Bug (Unsemantic Grid)

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:

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 enter image description here enter image description here

Upvotes: 0

Views: 315

Answers (2)

Loegic
Loegic

Reputation: 3438

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

Upvotes: 1

Sean Stopnik
Sean Stopnik

Reputation: 1868

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.

Upvotes: 1

Related Questions