<html> <head> <title>test</title> <meta name="viewport" content="width=300, initial-scale=1"> </head> <body> <div style="width:600;height:100;background-color:#ff0000;"></div> </body> </html>
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 https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag 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.