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.
What is a mobile web app?
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" />
Let's dig little deeper,
The viewport is the user's visible area of a web page.HTML5 lets you play with this viewport via <meta> tag.
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.
Attributes of <meta> tag
The 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.
The maximum-scale, minimum-scale, and 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.
Bonus Tip:
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...
Top comments (0)