CODEWITHSUNDEEP
htmlcssresponsive-design
ani_css
ani_css

Reputation: 2126

How to prevent zoom for html elements on mobile?

I have datepicker in my page and when I focus on my datepicker input then my page is scaled and this is not good sight.but I don't want to prevent zoom completely my page I only want to prevent for some element on my page for example my datepicker object or for my input elements.I have this problem on the phone devices with Iphone SE (I didn't look at on android)

I have this part

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">

but I know this prevent completelly zoom effect

Upvotes: 2

Views: 1536

Answers (1)

Raffaele Bonacchi
Raffaele Bonacchi

Reputation: 26

The only possible solution (tested) to deactivate the zoom in iPhone but allow the scroll is the following code, to put in the :

<script type="text/javascript">
    document.documentElement.addEventListener('gesturestart', 
        function (event) 
        {
            event.preventDefault();
        }, false);
</script>

If you want to do it for an Android device, add this code

<!-- META FOR IOS & HANDHELD -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style type="text/stylesheet">
    @-webkit-viewport   { width: device-width; }
    @-moz-viewport      { width: device-width; }
    @-ms-viewport       { width: device-width; }
    @-o-viewport        { width: device-width; }
    @viewport           { width: device-width; }
</style>
<script type="text/javascript">
    //<![CDATA[
    if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
        var msViewportStyle = document.createElement("style");
            msViewportStyle.appendChild(
                document.createTextNode("@-ms-viewport{width:auto!important}")
            );
            document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
    }
//]]>
</script>
<meta name="HandheldFriendly" content="true"/>
<meta name="apple-mobile-web-app-capable" content="YES"/>
<!-- //META FOR IOS & HANDHELD -->

Ps: the two codes can coexist.

Upvotes: 1

Related Questions