How to prevent zoom for html elements on mobile?

Question

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

Did you already look/read/try this: https://stackoverflow.com/a/6394497/2008111 — caramba, Jul 06 '17 at 07:19
@caramba thank you so much but what should I do to prevent ? I see css and js code but I try all js code but js code doesn't work anymore so if I could do prevent with css what should be my css ? thanks for the link — ani_css, Jul 06 '17 at 07:28
user-scalable=no does not work any more. There is no way to stop zoom. — viCky, Jul 06 '17 at 07:35
so what can be problem ? for example: I see web site is not zoom when focus on datepicker on mobile..what could be problem ? — ani_css, Jul 06 '17 at 07:40

Raffaele Bonacchi · Accepted Answer · 2018-12-23T14:49:33.267

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.

How to prevent zoom for html elements on mobile?

1 Answers1