Nowadays, users have to interact with computer screens of all different sizes, from smartphones and tablets to laptops, desktop monitors, and TVs. To design a web application in such a way that page layouts adapt intelligently to the user's screen width resolutions is called responsive design; for example, an advanced four-column layout 1292 pixels wide, on a 1025-pixel-wide screen, that autosimplifies into two columns when viewed on a tablet or smartphone. Its significance is now broadened to encompass web applications that respond to the user's environment intelligently, but also to make the web app adapt to the user's behavior. If you do only one thing to make your app's responsive design aware, apply what you read in this topic.
Add the following <meta> tag (the so-called viewport tag) to the <head> section of your HTML pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This will set you up for cross-device layout peace of mind. viewport is another word for screen width and this tag was originally devised by Apple. Setting content to "width=device-width" will query your device for its standard width and set your layout width accordingly. To be extra certain that your layout will be displayed as you intended it, you can also set the zoom level with content="initial-scale=1". This will make sure that upon opening the page, your layout will be displayed properly at a 1:1 scale; no zooming will be applied. You can even prevent any zooming by adding a third attribute value "maximum-scale=1". However, you must make sure that everything is readable for everybody; using this would probably hinder people with visual problems.
- If you want to start learning more about responsive design, a nice tutorial is available at http://www.adamkaplan.me/grid/