美文网首页
移动端页面禁止用户缩放

移动端页面禁止用户缩放

作者: 菜鸟搬砖 | 来源:发表于2018-12-07 14:39 被阅读10次

在IOS上即使设置了:

<meta name="viewport" content="width=device-width,initial-scale=1.0;user-scalable=no">

但依然可以缩放,这个操作是IOS系统允许的。

同时,当select选择框、input输入框在首次获取焦点时,也可能会页面被放大。

在查到的资料中也有说是因为你的字体太小所导致,设置select、input字体为16px的。

在网上搜了好多文章,最终得到结果:

document.addEventListener('gesturestart', function (e) {

        e.preventDefault();

 });

document.addEventListener('dblclick', function (e) {

        e.preventDefault();

});

document.addEventListener('touchstart', function (event) {

        if (event.touches.length > 1) {

                event.preventDefault();

        }

});

var lastTouchEnd = 0;

document.addEventListener('touchend', function (event) {

        var now = (new Date()).getTime();

        if (now - lastTouchEnd <= 300) {

                event.preventDefault();

        }

        lastTouchEnd = now;

}, false);

相关文章

  • 一个使用js实现禁止PC端浏览器缩放的例子

    众所周知:移动端页面禁止用户缩放界面只需加上 即可,但是pc端确实比较麻烦,用户可以通过如下几种方式来缩放: wi...

  • 移动端页面禁止用户缩放

    在IOS上即使设置了: 但依然可以缩放,这个操作是IOS系统允许的。 同时,当select选择框、input输入框...

  • meta设置

    移动端页面设置视口宽度等于设备宽度,并禁止缩放。 移动端页面设置视口宽度等于定宽(如640px),并禁止缩放,常用...

  • 移动端页面禁止缩放

  • 禁用浏览器的缩放功能(js)

    一、移动端禁止缩放移动端在禁止缩放上比较简单,添加meta标签即可 二、PC(web)端禁止浏览器缩放S(情景)当...

  • 移动端资源整理H5

    移动端资源的整理 meta标签 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 忽略将页面中的数字识别为电话号...

  • H5项目常见问题及注意事项

    Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 常见问题:移动端如何定义字体font-fa...

  • 移动端开发总结

    一、meta标签相关知识1、移动端页面设置视口宽度等于设备宽度,并禁止缩放。2、移动端页面设置视口宽度等于定宽(如...

  • 干货教程:移动页面开发小技巧

    01meta标签的相关知识 1、移动端页面设置视口宽度等于设备宽度,并禁止缩放。 1 2、移动端页面设置视口宽度等...

  • 移动端布局方案

    https://github.com/imochen/hotcss 页头设置 移动端需要禁止用户缩放,否则体验非常...

网友评论

      本文标题:移动端页面禁止用户缩放

      本文链接:https://www.haomeiwen.com/subject/kiythqtx.html