On modern mobile-friendly website, you’ll generally set a viewport meta tag like…

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

That basically tells the browser you the site is mobile-friendly, and shouldn’t be shrunk down.

If you don’t use a meta tag, the phone will render your page at 980px wide, and let the user zoom in and out, as desired.

Setting Specific Viewport Widths

On occasion, instead of setting the viewport to the devices screen width, you may want to display the website at a specific width (in pixels).

For example, when designing websites for clients, I will send an preview image to the customer in an HTML page, which lets them see what the website looks like on a desktop.

website screenshot.

Website preview with 1220px wide content area.

But if they happen to check it on a phone, I need to make sure it doesn’t cut things off in weird ways.

This is where the set preview…

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

Using this code will show only the main content area on a phone.

 

Do you have any questions?  Was this helpful?

Let us know your thoughts in the comments below…

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *