[SOLVED] Webpage is Rendered too Narrow on iPhone Browser. Viewport Meta Tag Not Working!

Amazon I have a Weebly account for a website I am working on which is http://www.pwsa.org.tw/. When the website is rendered in a browser on a PC, there are no layout issues. When the website is rendered on iPhone, however, the webpage content rendered is too narrow, leaving a huge empty space. Here's what it looks like:



I tried adding meta viewport tag in the header of the HTML markup like the following but the viewport meta tag just wouldn't fix this layout issue.

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

Read on to see how I fixed this webpage layout issue when rendered on iPhone browser.

Solution

The root cause is that some element in your HTML markup has abnormal width, padding, or margin. For example, I had a logo which has "margin-right:740px;" and it was causing this issue. Once I removed this CSS style, the webpage was rendered correctly on iPhone.

If you are using an external website editing platform or system like Weebly or Blogger and cannot control the inline styles of some HTML element, use external CSS style with !important keyword.

Questions? Let me know!