Home/ Questions/Q 8008261
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T18:04:53+00:00

I’m hoping there’s a relatively simple fix for this. I’ve created a simple website

  • 0

I’m hoping there’s a relatively simple fix for this. I’ve created a simple website for a client which displays as expected in all browsers. Developing a separate mobile site for the project was not part of the scope of work, but I would expect the website to display correctly on modern mobile browsers. Currently, on an iPhone 4, the left side of the 1000px-wide container is clipped (by maybe 10px), and I can’t scroll left to see it at all. I’m wondering if this is a CSS issue or some kind of zoom issue? The site can be visited here.

I’ve had a hard time finding any resources related to the problem, but did find this snippet:

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

Could this be the start of a work-around? I would be happy if the site loaded with a default zoom of, say, 75%, but I have no experience coding for mobile devices.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    So for my particular case, I have found a solution that works. Hopefully this will be helpful for others in similar situations.

    The key was, in fact, in the viewport meta-tag. I’m working with a webpage whose content is restricted to a centered 1000px x 600px container. THIS article was extremely helpful in figuring this out.

    As the article states, “By default, Safari on the iPhone will render your page as if it was a desktop browser on a big screen, with 980 pixels width available for the web content. Then it will scale down the content so that it fits the small screen.”

    In my case, with a 1000px fixed width, I was left with 20px cropped off the left, and an inability to pan over to it. The trick is to set a custom width (and height if necessary).
    Be sure to check the site in both vertical and horizontal iPhone orientations. There are other parameters you can use with this meta-tag, but I’ve kept it simple.

    This is the code I included between the <head></head> tags of the site:

    <meta name="viewport" content="width=1050px, height=650px" />

    This gives me a 25px white border around the content of the site, and still allows zooming, etc. This is NOT a substitute for an iPhone specific website, but it ensures that users will be able to access all of the site’s content.

    Hope this helps!

    • 0