ADVERTISEMENT
ADVERTISEMENT

How can I 'disable' zoom on a mobile web page?

Learn, how to 'disable' zoom on a mobile web page?
Submitted by Apurva Mathur, on June 19, 2022

Before starting the topic let us first understand what is the need of disabling zoom on a mobile web page? Sometimes it becomes an important concept to disable zoom because when the user zooms a webpage so at times it disturbs the position of every element in the entire webpage. To prevent this situation developers/ clients usually wish to disable zoom on the mobile web page.

Now, let us explore how we can disable zoom?

HTML provides us with one special tag which helps in achieving this target. With the help of the <Meta> tag, we can disable zoom on a mobile web page.

What is the <Meta> tag and how it is used in HTML?

<Meta> tag – <Meta> tag contains Meta data.
[Meta data is a set of data that gives information about other data; this set of data gives the entire knowledge about the webpage.]

The data represented in the Meta tag is not visible on the webpage.

The most prominent work of Meta data is that it is used by search engines. The details written inside the Meta tag are used by search engines. Whenever you search anything on Google, the search engine takes keywords from that and then it searches those keywords in these meta data, and shows you the search result according to the keywords matched.

For disabling zoom on a mobile web page, <Meta> tag is used in a following method:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Here, viewport is the content area of the web page. As we know web pages are too long and to fix the viewport in the fixed size according to the mobile screen, the entire web page is scaled down to fit the content on the screen.

content="width=device-width", works the same as it sounds this section basically fits the width of the content according to the size of the screen.

initial-scale=1.0, this part will set the zoom level.

In combination, these attributes help to disable the zoom on a mobile web page.

Let us see how the content will look like on a mobile page if the Meta tag is used and if the Meta tag is not used?

Example 1: Disable zoom on a mobile

This is how the content will look like in mobile view when you don't use the Meta tag in a code.

Example 2: Disable zoom on a mobile

And this is how your page will look in mobile view when the Meta tag is used.

You can see the difference what the Meta tag can make if it is included in the code.

Code:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <style></style>
   <body>
      <img src="https://cdn-prod.medicalnewstoday.com/content/images/articles/325/325466/man-walking-dog.jpg" width="460" height="345">
      <p style="font-size: 30px;">
         Nature has provided us numerous gifts such as air, water, land, sunlight, minerals, plants, and animals. All these gifts of nature make our earth a place worth living. Existence on Earth would not be possible without any of these. Now, while these natural resources are present on Earth in plenty. Unfortunately, the necessity of most of these has increased extremely over the centuries due to growth in the human population.
      </p>
   </body>
</html>

Note: To see your content in a responsive way follow the steps:

  1. Run your code in the chrome, and go to inspect.
  2. When you'll click on inspect, the console will get open.
  3. Then, go to the toggle device toolbar on the top left-most corners.

    Example 3: Disable zoom on a mobile

  4. Select the responsive dimensions.

    Example 4: Disable zoom on a mobile

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.