How to Disable Zoom on a Mobile Web Page using CSS?

Last Updated : 29 Oct, 2024

To disable the zooming option on a mobile web page using CSS, you can set the viewport meta tag settings. Set the initial zoom level to 1, limit the maximum zoom, and disable user scaling. This prevents users from zooming in or out on the page.

Syntax

<meta name="viewport" content= "width=device-width, user-scalable=no">

Approach To Disable Zoom on an Mobile Web Page

The viewport meta tag is set with user-scalable=no, which disables the ability for users to zoom in or out on the webpage.

Zoomable Preview

Non-zoomable Preview

Example: The user-scalable=no is sued to disable the zoom option on mobile web page.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        Disable Double-Tap to Zoom
    </title>
    
    <meta meta name="viewport" content= 
            "width=device-width, user-scalable=no" />

    <style>
        body {
            height:410px;
            width:600px;
            border: 2px solid green;
        }
        p {     
            font-size:20px; 
            padding:5px;
            margin:7px;
            width:270px;
            height:300px;
            border:2px solid green;
        }
    </style>
</head>

<body>
    <center>
        <h1 style="color:green;text-shadow: 1px 3px 2px #000">
            Code World
        </h1>
        
        <div>
            <p style=" float:left; "> 
                It is a good platform to learn programming.
                It is an educational website. Prepare for the
                Recruitment drive of product based companies
                like Microsoft, Amazon, Adobe etc with a free
                online placement preparation course. The 
                course focuses on various MCQ's & Coding 
                question likely to be asked in the interviews
                & make your upcoming placement season 
                efficient and successful. 
            </p>
            
            <p style="float:right;">
                Also, any geeks can help other geeks by writing
                articles on the GeeksforGeeks, publishing
                articles follow a few steps that are Articles
                that need little modification/improvement from
                reviewers is published first. To quickly get 
                your articles reviewed, please refer existing
                articles, their formatting style, coding style,
                and try to make you are close to them. 
            </p>
        </div>
    </center>
</body>

</html>

Output

How to disable a link using only CSS?

Sabya_Samadder

Improve

Article Tags :

How to Disable Zoom on a Mobile Web Page using CSS?

Approach To Disable Zoom on an Mobile Web Page

Similar Reads

Thank You!

What kind of Experience do you want to share?