In this blog,let me tell you how you can make any of your web app mobile friendly and how I made my portfolio mobile friendly with a single line of code.
Mobile web apps are web apps optimized for a good phone experience. They aren’t mobile applications, but websites written in HTML/CSS and run by a browser. While they may be designed to resemble the feel of smartphone apps, they don’t have much in common.
You need to understand that most web apps are viewed more often on a mobile device than on a desktop.
You can achieve decent view across a number of mobile devices with just this single line inside your head tag in html file without any media queries.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
The viewport is the user's visible area of a web page.HTML5 lets you play with this viewport via
width=device-width => This basically tells the browser to render the page as per the screen-width of user's device.
initial-scale=1.0 => initial-scale property controls the zoom level when the page is first loaded.
In my case for this portfolio which I had made I had to set the
initial-scale=0.5 which supresses the zoom level to 0.5 inorder to have better view in mobile devices.
width property controls the size of the viewport. It can be set to a specific number of pixels like
width=600 or to the special value device-width
width => The width of the virtual viewport of the device.
height => The height of the “virtual viewport” of the device.
user-scalable properties control how users are allowed to zoom the page in or out.
maximum-scale=2.0=> limits the maximum value that the user can zoom to 2.0
minimum-scale=0.5 => limits the minimum value that the user can zoom to 0.5
user-scalable => lets the user to zoom in or out.Takes the values yes or no.
It’s generally recommended that you don’t prevent scaling.
Before you jump into figuring out the ways to optimise for mobile devices just peek into this website to check whether your website is already mobile friendly.
Mobile friendly tool offered by Google lets you get a quick answer on whether or not your website is mobile friendly.Just drop your url in the search box.
If this tool responds you with "your website needs a lot of work", then making your website mobile optimised should be treated as a top priority.
I'd love to hear your opinions in the comment section.
Thanks for reading...