How to set the viewport on a non-responsive mobile site?

Question

I am styling a non-responsive website and having issues in mobile views. I have no viewport set. I assume content should appear the same on mobile as it does on desktop only zoomed out.

Here is a visual of my issue:

Explanation:

When viewing on desktop it is fine. On iPhone (mobile) the header, nav and footer's widths shrink (see image) and the main content essentially extends beyond the phone viewframe (or viewport or whatever)...

Thanks!

Answer 1

If your site is not responsive, it will help to set a viewport. Open up the site in your web browser and find the minimum width that causes your design to not break. Then use the following meta tag in your header, replacing width with the minimum width you want your site to show at.

<meta name="viewport" content="width=1024">

The meta viewport tag tells the browser that it should render the web page at a different width than the default. For instance, the default viewport size for Safari iOS is 980px, which means that for web pages without a meta viewport tag, the body will be rendered 980px wide. By specifying a meta viewport tag with a width of 1024, the body will be rendered at 1024px wide instead.

To illustrate, here's an example of a website that has a main div with a width of 590px, how it renders at the default viewport size of 980x, and how it renders when a custom viewport width of 590px is specified using the meta viewport tag:

Details on the viewport meta tag:
https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag