Is the viewport meta tag really necessary?

I've created a few responsive sites but am rather new to responsive site development. In my CSS 99% of my values are in ems or percentages. I am using media queries (both max-width and max-device-width) to make layout changes. I have not included a viewport meta tag and it works perfectly on iOS, a number of Android phones and tablets that I tested on, and all desktop browsers.

Adding a meta tag breaks my site. Am I doing something wrong, or doing something right so that I don't need to include it? I'm confused as to why it seems to be a best practice, as it's breaking my stuff.

Am I missing something?

Solution 1:

On desktop operating systems, browser viewports are a fixed number of pixels wide, and web page content is rendered into them as-is.

Starting with Safari on iOS (or whatever we were supposed to be calling iOS back then), mobile browser viewports have been "virtual". Although the viewport may only take up (for example) 320 physical pixels-worth of space in the interface, the browser creates a "virtual" viewport that's larger (980 pixels wide by default on iOS, I think) and renders content in there, then zooms that virtual viewport out until it fits into the actual physical pixels available on the device’s screen.

The viewport meta tag allows you to tell the mobile browser what size this virtual viewport should be. This is often useful if you're not actually changing your site's design for mobile, and it renders better with a larger or smaller virtual viewport. (I believe 980 pixels was chosen as the default because it did a good job of rendering lots of high-profile sites in 2007; for any given site, a different value might be better.)

Personally, I always use <meta name="viewport" content="width=device-width, initial-scale=1"> so that the virtual viewport matches the device dimensions. (Note that initial-scale=1 seems to be necessary to make the virtual viewport adapt to landscape mode on iOS.) That makes mobile browsers behave like desktop browsers always have, which is what I'm used to.

Without a viewport meta tag, your site will be rendered into the device's default virtual viewport. I don't think that's necessarily a problem, especially if all your units are ems or percentages as you say. But it might be a bit confusing if you need to think in pixels at any point, especially as different browsers could have differently-sized default virtual viewports. It also might be confusing for subsequent maintainers if they don't understand the approach.

I imagine you set your base font size quite large, so that it's legible? Could you link to one of the websites you've created like this, so we can see an example?

Solution 2:

Without viewport your device uses a virtual viewport which by default is effectively a zoomed out version of your website, this is around 980 px on iPhone and 800px on andriod. As soon as you set the viewport and disable this zooming out, the device treats the website as it should and measures out at around 480px wide or 320px depending on device and orientation etc.

Full resource here below, my advice is that whenever your working with responsive & mobile, always set the viewport first. It is the best way to normalise device zoom and ensure your site is shown using an actual device width as opposed to any virtual widths.

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml