Node.js in essence is JavaScript on the server-side. We use it along with the Express module to create a barebones web server to serve files and resources to the browser. I am comfortable with using Visual Studio Code IDE but you can choose any text editor of your choice.<\/p>\n
2. Project Layout<\/h2>\n
The project structure of our example application is as follows:<\/p>\n A viewport, in web development parlance, is the screen area in which the web browser displays content. The viewport is closely tied to the concept of responsive design. When we attempt to build websites that adapts themselves to the device being used to view it, in essence, is called a responsive design. To build a website that is responsive we utilize media queries which allow us to enable different layouts for different screen sizes or browser viewports. To prevent the mobile devices from shrinking web pages we can leverage the meta tag to configure the viewport. A typical viewport meta tag looks like below:<\/p>\n What this does is tell the browser to not shrink the page. Which allows our media queries to fire and take effect. The css applied as a result of media queries firing leads to a world of improvement in user experience. In the next section we will build an application to demonstrate these concepts.<\/p>\n In our application we create two pages, namely, index.html<\/em><\/span><\/p>\n withoutmetatag.html<\/em><\/span><\/p>\n Now we create our html5.viewport.css<\/em><\/span><\/p>\n As you can see in the above css and markup, we have added three breakpoints in css to apply for three different screen sizes, viz., Laptop & above, Tablets & Smartphones. We have added three The The As we can see from the above screen grabs on the three screen sizes, the results are quite dramatic with the use of Viewport Meta tag. Overall the meta tag allows us to provide a much better experience across devices with varying screen sizes.<\/p>\n To run the project you need to execute the following commands at the root of the project.<\/p>\n then<\/p>\n Now, navigate to the URL This wraps up this post on the HTML5 Viewport Meta Tag.<\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/12\/html5.viewport.project.layout.jpg\")
<\/a>3. Viewport<\/h2>\n
3.1. What is Viewport?<\/h3>\n
\nBut an issue with the media query approach is that they do not fire on the devices they are meant for. The reason being that the browser renders the web page in a virtual window and then displays the results shrunk to fit the viewport. Although mobile users were able to zoom into the area of interest on the page, the usability of webpages left a lot to be desired.<\/p>\n<head>\r\n...\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n...\r\n<\/head>\r\n<\/pre>\n
\nThe meta tag used to configure the viewport accepts the following key-value pairs, separated by commas.<\/p>\n\n\n
\n \nKey<\/th>\n Values<\/th>\n Description<\/th>\n<\/tr>\n<\/thead>\n \n width<\/td>\n Size in pixels or the special value device-width<\/td>\n Sets the width of the page to the width of the screen<\/td>\n<\/tr>\n \n initial-scale<\/td>\n Numeric value<\/td>\n Sets the initial zoom level of the page<\/td>\n<\/tr>\n \n maximum-scale<\/td>\n Numeric value<\/td>\n Sets the maximum zoom level of the page,
\nAvoid specifying this value and leave the user in charge of the same.<\/td>\n<\/tr>\n\n minimum-scale<\/td>\n Numeric value<\/td>\n Sets the value indicating how much the user can zoom out. Avoid specifying this value.<\/td>\n<\/tr>\n \n height<\/td>\n Size in pixels to set the height of the viewport.
\nAlthough support for this is scant at best.<\/td>\nAvoid using or setting a value for this as it is not supported widely.<\/td>\n<\/tr>\n \n user-scalable<\/td>\n Can be set to no<\/td>\n When set to no it prevents the user from zooming in.
\nAbsolutely avoid setting this value.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n3.2. Using meta tag to tweak Viewport<\/h3>\n
index.html<\/code> & withoutmetatag.html<\/code>. The first page will have the Viewport meta tag whereas the second one will not. We will try to create layout with three breakpoints using media queries. Meaning that the UI layout will adapt itself to three screen sizes by modifying its layout to adjust to the screen sizes. First of all let us look at the markup we need to add to our two html<\/code> files.<\/p>\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n <head>\r\n <meta charset=\"utf-8\">\r\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->\r\n <title>WCG -- HTML5 Viewport Example<\/title>\r\n\r\n <link rel=\"Stylesheet\" href=\"css\/html5.viewport.css\"\/>\r\n<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->\r\n<!-- WARNING: Respond.js doesn't work if you view the page via file:\/\/ -->\r\n<!--[if lt IE 9]>\r\n<script src=\"https:\/\/oss.maxcdn.com\/html5shiv\/3.7.3\/html5shiv.min.js\"><\/script>\r\n<script src=\"https:\/\/oss.maxcdn.com\/respond\/1.4.2\/respond.min.js\"><\/script>\r\n<![endif]-->\r\n <\/head>\r\n <body>\r\n <h1>WCG -- HTML5 Viewport Example<\/h1>\r\n\r\n <div class=\"column red\"><\/div>\r\n <div class=\"column green\"><\/div>\r\n <div class=\"column blue\"><\/div>\r\n\r\n <script src=\"js\/html5.viewport.js\"><\/script>\r\n\r\n <\/body>\r\n<\/html>\r\n<\/pre>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n <head>\r\n <meta charset=\"utf-8\">\r\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n\r\n<!-- The above 2 meta tags *must* come first in the head; any other head content must come *after* these tags -->\r\n <title>WCG -- HTML5 Viewport Example<\/title>\r\n\r\n <link rel=\"Stylesheet\" href=\"css\/html5.viewport.css\"\/>\r\n<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->\r\n<!-- WARNING: Respond.js doesn't work if you view the page via file:\/\/ -->\r\n<!--[if lt IE 9]>\r\n<script src=\"https:\/\/oss.maxcdn.com\/html5shiv\/3.7.3\/html5shiv.min.js\"><\/script>\r\n<script src=\"https:\/\/oss.maxcdn.com\/respond\/1.4.2\/respond.min.js\"><\/script>\r\n<![endif]-->\r\n <\/head>\r\n <body>\r\n <h1>WCG -- HTML5 Viewport Example<\/h1>\r\n\r\n <div class=\"column red\"><\/div>\r\n <div class=\"column green\"><\/div>\r\n <div class=\"column blue\"><\/div>\r\n\r\n <script src=\"js\/html5.viewport.js\"><\/script>\r\n\r\n <\/body>\r\n<\/html>\r\n<\/pre>\n
html5.viewport.css<\/code> to create the layout with breakpoints using media queries.<\/p>\n@media screen and (min-width: 1024px ){\r\n .column{\r\n width: 30%;\r\n margin: 5px;\r\n display: inline-block;\r\n }\r\n}\r\n@media screen and (max-width: 768px) and (min-width: 425px ){\r\n .column{\r\n width: 45%;\r\n margin: 5px;\r\n display: inline-block;\r\n }\r\n}\r\n@media screen and (max-width: 425px ){\r\n .column{\r\n width: 96%; \r\n margin: 5px;\r\n display: inline-block;\r\n }\r\n}\r\n.red{\r\n background-color: red;\r\n height: 150px;\r\n}\r\n.blue{\r\n background-color: blue;\r\n height: 150px;\r\n}\r\n.green{\r\n background-color: green;\r\n height: 150px;\r\n}\r\n<\/pre>\ndiv<\/code> which appear in the same row on a laptop and spill into two rows on a tablet screen and three rows on a smartphone. Now, we are all set so let us run the application and see the results in the next section.<\/p>\n3.3. Results<\/h3>\n
index.html<\/code> looks like below on the three screen sizes.<\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/12\/WithMetaTagIndexHTML.jpg\")
<\/a>withoutmetatag.html<\/code> looks like below on the three screen sizes.<\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/12\/WithoutMetaTag.jpg\")
<\/a>4. Running the Project<\/h2>\n
> npm install\r\n<\/pre>\n
> node index.js\r\n<\/pre>\n
http:\/\/localhost:8090\/index.html<\/code> and http:\/\/localhost:8090\/withoutmetatag.html<\/code><\/p>\n5. Download the Source Code<\/h2>\n