CODEWITHSUNDEEP
htmlioscssiphone
Shawn Dibble
Shawn Dibble

Reputation: 186

Site really small on iphone

So I pushed a site to http://austinenl.com however it appears that on iPhones, it appears really zoomed out. From my research, I needed to add 

  <meta name="viewport" content="width=device-width; initial-scale=1.0;">

However, after adding this, I am still getting reports that the site looks bad on iphone. I can't find any other source that will give any other suggestions on what would cause this issue, so I am hoping someone here can help.

iphone output

Upvotes: 3

Views: 216

Answers (2)

Berendschot
Berendschot

Reputation: 3114

Instead of using: <meta name="viewport" content="width=device-width; initial-scale=1.0;">, which uses a semicolon.

You could try using: <meta name="viewport" content="width=device-width, initial-scale=1">, which uses a comma.

If have been using the second option for years now and everything has been working fine. This is the way as Apple intended it. See the Supported Meta Tags.

Edit: I've checked your CSS and I've found some rules which I'm not sure where they are used for, but removing them seems to help.

.area-checkboxes {
  display: -webkit-flex;
}

.area-checkbox {
  min-width: 250px;
  -webkit-flex: 1 1 250px;
  flex: 1;
}

Both found in style.css

Upvotes: 3

Liam Macmillan
Liam Macmillan

Reputation: 398

Try adding a width of 100% to the body and get back to me

html,body{width:100%}

Upvotes: -1

Related Questions