Is the Viewport Meta Tag Really Necessary

Is the viewport meta tag really necessary?

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?

Do we need meta name=viewport content=width=device-width, initial-scale=1.0 without Bootstrap?

YES. <meta name="viewport" content="width=device-width, initial-scale=1.0"> is completely unrelated to the Bootstrap framework, and should be on every webpage, regardless of what framework you're using.

The viewport META tag allows device width to map to the width CSS property, which essentially means that device pixels correctly map to CSS pixels, allowing elements and fonts to correctly scale on mobile devices. Without this, a pixel is not a pixel in the traditional sense.

Without the viewport META tag, you will have an incredibly hard time ensuring that your website looks the same across various different mobile devices, as most mobile devices have different viewports. Fonts may seem much too big on one device, and much too small on another, even when using percentage-based units of measurement. Apple has great documentation showcasing this in Safari.

In addition to this, Google now audits websites for the viewport META tag through Lighthouse, and making use of it will improve your SEO:

enter image description here

To ensure that your website displays correctly on all mobile devices, make sure to use the viewport META tag with content containing either width, initial-scale or both. Also make use of media queries to fine-tune responsive designs.

CSS Tricks has a helpful list of breakpoints that kick in for specific devices, if you're looking for detailed mobile optimisation, and ViewportSizes has a sheet showcasing 286 different mobile devices and their respective viewport sizes for reference.

What exactly viewport meta tag does in html?

The browser's viewport is the area of the window in which web content can be seen.

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in CSS pixels at a scale of 100%.

The initial-scale property controls the zoom level when the page is first loaded.

Now, for images to be responsive in nature, we should always use viewport-relative units i.e %

so, you should add

img {
width: 100%;
height: auto;
}

for the image to resize along with screen size. Hope it clarifies your doubt!

Should I use META viewport tag if using only desktop viewports?

If you're building your website exclusively for desktop browsing (so no mobile site / responsive site), then no. The viewport tag is only there to tell mobile browsers that you've taken their smaller screens into account.

Good read on this subject:
http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho

Meta viewport tag seems to be ignored completely or has no effect

It is working! On your page you are using:

<meta content="width=640, initial-scale=0.47, maximum-scale=1.0, user-scalable=1" name="viewport">

When I open the page on my phone (ios7 iphone5) I see exactly the right result.

Are you 100% sure you really tried putting the following in your code?

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

It doesn't get ignored.

UPDATE1

I just saw that in your code it seems you are using my second viewport but i gets changed probably by javascript to the 640px viewport. Thats maybe the reason why for you it feels like it gets ignored. Because during runtime the viewport gets changed...

UPDATE2

Ok found the problem.

function updateWidth(){
viewport = document.querySelector("meta[name=viewport]");
if (window.orientation == 90 || window.orientation == -90) {
viewport.setAttribute('content', 'width=1401, initial-scale=0.34, maximum-scale=1.0, user-scalable=1');
}
else {
viewport.setAttribute('content', 'width=640, initial-scale=0.47, maximum-scale=1.0, user-scalable=1');
}
}

Your page is calling this function which overrides your viewport. Did you know about that function?

Default virtualport size on mobile when meta tag is not declared?

When the meta tag is not defined there is a virtual viewport default values defined. Non-mobile-optimized sites with these default vaules looks in general better on narrow screen devices.

On Safari iOS the default width is 980 pixels, and the others browsers width size are alike or a little less.

Narrow screen devices (e.g. mobiles) render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then pan and zoom to see different areas of the page.

For example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space.

Explanation and default values for width and height with viewport on mobiles

Apple as the inventor of viewport says that the default viewport settings are:
The default width is 980 pixels. However, these defaults may not work well for your webpages, particularly if you are tailoring your website for a particular device.

Apple configuring viewport and default values



Related Topics



Leave a reply



Submit