Understanding META VIEWPORT

Question

Understanding META VIEWPORT

Navigation

#1 by (3 votes)

0

I do not understand meta name="viewport" . I am using the example offered by w3Schools and I am not able to understand what it is for, what exactly it does. I have read the explanation and I understand perfectly that it says that it serves to configure the width of the page to the width of the device width=device-width , and the level of zoom when the page is loaded for the first time initial-scale=1.0 , but I can not see its effect. I mean ...

Using, as I say, the example offered w3Schools , I see in your code, which is made with meta name="viewport" , which in addition to this meta tag have included a CSS code that is what really generates the effect that the viewport is supposed to do. The CSS code is:

<style>
img {
max-width:100%;
height:auto;
}
</style>

If we comment on the line max-width:100% we lose the effect that the viewport is supposed to perform. For this reason I do not quite understand what the viewport really is for.

html css viewport

asked by Hugo Sanchez 24.06.2016 в 21:40

source

1 answer

DataGridView C # How to create a trigger in mysql that when deleting a row from a table, I deleted a database?

score 3 · Answer 1

First of all, I want to suggest that you DO NOT use w3Schools, there are many ways in which this is explained in great detail, although most of your "problems" may have been solved:

link
link

The best source (apparently) today is Mozilla Developer Network .

Keeping in mind that you already understand what the viewport is for, let's go to practice:

If you do not include width=device-width , you are allowing the browser to use an arbitrary width, defined by the browser's manufacturer, in many cases it is 980 or 1024 pixels, here there is no correct or incorrect value, simply the creators of the browsers assign a value. From there, the browsers make an automatic zoom so that the 980px (the width of the document) fit on the current screen (in case it is a device with width less than 980px).

Here you can see more information about the default width:

link
link

If you do not include initial-scale=1 , you may have size problems (zoom) of the elements of the page when changing orientation (on a mobile device), while including it keeps the zoom of the elements in both orientations. It also prevents the page from loading with a zoom (1.5, 2.0, etc. = assigned by it or by a bug.

We could say that not using this parameter is "less serious" than not using the previous one.

In the following link you can see a demo about it:

link

You can "try" or see your current width and zoom (depending on the browser): link