Question

我的页面中有datepicker，当我专注于我的datepicker输入时，我的页面被缩放，这不是很好看。但我不想完全阻止缩放我的页面我只想防止一些在我的页面上的元素，例如我的datepicker对象或我的输入元素。我在带有Iphone SE的手机设备上有这个问题（我没有在Android上查看）

我有这个部分

＆＃13;

<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">

＆＃13;

但我知道这可以防止完全缩放效果

Answer 1

停用iPhone中的缩放但允许滚动的唯一可行解决方案（已测试）是以下代码，放在：

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

如果要在Android设备上使用它，请添加此代码

<!-- 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：这两个代码可以共存。

如何防止移动设备上的html元素缩放？

1 个答案: