meta viewport

The first and most important thing to begin your responsive web design is to set the viewport meta. The syntax is like <meta name=”viewport” content=”width=300, initial-scale=1″>.  What does the width parameter mean? Does it mean the width of the window of the browser,i.e., when you open the webpage, the browser’s windows shrinks or expands to that width? Unfortunately, this line of html is not as powerful as javascript that can adjust the size of the browser’s window. Whatever width you set, the size of the browser’s window keeps the same. Considering the literal meaning of the word “viewport”, does it mean a window of that width that is in the middle of the browser’s window, and only the content in that window is visible while the other part of the content is shadowed(invisible)? Write a little html file with that meta in it, and you will see there is no such a window(view port). In fact there seems no change about the webpage when the width of viewport is changed. The third conjecture is that this parameter tells the browser: suppose your window is of that width regardless of the actual pixel size. We use the following html for a test:

<meta name="viewport" content="width=300, initial-scale=1">
<div style="width:600;height:100;background-color:#ff0000;"></div>

According to the above conjecture, we expect a red block which shows half of it on the browser’s window and there should be a horizontal scroll bar that you can pull to see the other part of the block. However, the reality is that the whole block is displayed on the browser’s window(about 1024*768). The viewport’s width has no effect at all. So what on earth is this mysterious tag used for?

Well, the reason that viewport has no effect is only a mobile browser supports it, desktop browser like firefox I am using to test does not support the tag at all. Unfortunately, neither the post that is the first entry in google search result for “meta viewport”, nor the post mentioned in that article points out this fact. On a mobile browser or a mobile emulator, you will see our third conjecture is true. You can set width=device-with,which tell the browser to suppose  its window has the size of its actual device size.

Comments are closed, but trackbacks and pingbacks are open.