Responsive Mobile Ready WebPage Using ViewPort Meta Tag Example

When you create a html web page, of course you want it to be viewable and user friendly in all screen size devices include mobile device, PC and tablet also. But before viewport meta tag is introduced in html, mobile device can not display the web page as good as desktop. This article will introduce viewport meta tag usage with examples.

1. ViewPort Meta Tag Example.

1.1 WebPage Without ViewPort Meta Tag.

First let’s see a web page example as below. There is not the viewport meta tag in it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mobile Ready WebPage Demo</title>
</head>
<body onload="javascript:window.scrollTo(0, 10);">
<h3>ViewPort Meta Tag</h3>
<p>ViewPort meta tag is very helpful when you want your web page mobile friendly. Because mobile screen is smaller than PC.
So if do not use viewport meta tag, the web page will have a not easy to view style in mobile device.</p>
</body>
</html>

To browse above html webpage in android tablet device, you need first install a web server such as tomcat. You can read article How To Install Tomcat 9.0 Correctly On Your Machine and How To Install Tomcat In MacOS to learn how to do it.

After tomcat installation, you should create a sub folder demo under tomcat_home_directory/webapps folder, and then copy and save above html code in a file called mobile-ready-responsive.html.

mobile ready webpage in tomcat demo folder

Now open a web browser in android tablet and browse url http://10.0.2.2:8089/demo/mobile-ready-responsive.html then you can see below web page. You can see that the content data can not be fully visible without scroll horizontally. This is because the mobile web browser think the web page is built for desktop resolution.

READ :   How To Debug Android SDK Source Code In Android Studio

browse webpage in android tablet without viewport meta tag

1.2 WebPage Use ViewPort Meta Tag.

To resolve above issue, we add viewport meta tag in the html head section. The viewport meta tag will tell mobile web browser how to display the web page in a mobile device.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width; user-scalable=0;" />
    <title>Mobile Ready WebPage Demo</title>
</head>
<body onload="javascript:window.scrollTo(0, 10);">
<h3>ViewPort Meta Tag</h3>
<p>ViewPort meta tag is very helpful when you want your web page mobile friendly. Because mobile screen is smaller than PC.
So if do not use viewport meta tag, the web page will have a not easy to view style in mobile device.</p>
</body>
</html>

As you can see in above code, the red line of code is just the viewport meta tag. It tell mobile web browser the web page width will full fill the device width, and user can not scale it ( zoom in or out ).

Now copy and save the code to tomcat demo folder again. Browse the page from mobile web browser, you can see below picture. You can see the content data line is wrapped automatically to adapt the device width.

browse web page that has viewport meta tag in android tablet web browser

2. ViewPort Meta Tag Properties.

Below is a list of viewport meta tag properties that you can use.

  1. width : The width of the viewport, the value can be device-width or number of pixels ( not recommended ).
  2. height : The viewport height. The value can be device-height or number of pixels.
  3. user-scalable : Whether or not user can scale the screen. 1yes or true means permit. no or false means not allowed.
  4. initial-scale : Initialize scale of the screen when web page is loaded. The value can be any number. For example if the property value is 1.0 that means 1 viewport pixel will be scaled to 1 screen pixel.
  5. minimum-scale : The minimum scale value that can be applied to the screen. (0 to 10 ).
  6. maximum-scale : The maximum scale value that can be applied to the screen. ( 0 to 10 ).
(Visited 83 times, 1 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.