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.
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!