Mobile Friendly website
To make a site mobile friendly in HTML page optimized for small screen devices; i.e to make an HTML page get adequately rendered on small screen devices; we need to add a viewport meta tag to the head section of the page.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML demo</title> <meta name="viewport" content="width=device-width, initial-scal=1"> </head> <body> </body> </html>
- width=device-width: sets the width of the HTML page to the width of the device screen
- initial-scale=1: set the zoom level of the HTML page to 1, when it is first loaded
We can also use the following:
- maximum-scale: used to define how far the user can zoom in to the page.
- minimum-scale: used to define how far the user can zoom out to the page.