H5&CSS基础 —— (005)禁止手机端缩放
»
(001)免费的https证书
(002)关于栏目
(003)浏览器的可见区域
(004)为什么ReactJs
(005)禁止手机端缩放
(006)H5中的em
(007)页面的空格宽度
(008)H5特殊字符
(009)H5限定输入
(010)H5字体
(011)nginx重定向配置
(012)文本缩进
(013)flex布局
(014)渐变色边框
(015)常用DOM操作
(016)Media Query
(017)CSS选择器
(018)CSS隔行变色
(019)fetch
(020)JS操作属性
(021)scroll div
(022)JS for循环
(023)禁止文本被选中
(024)float控制精度输出
(025)Ionic全屏
(026)SVG圆
(027)SVG椭圆
(028)SVG椭圆弧
(029)SVG椭圆扇区
(030)使用WebAssembly
(031)JS操作单复选框
(032)SVG贝塞尔曲线
(033)threejs材质
(034)发光图片样式
(035)页面动画制作要点
(036)CSS渐变色字体
(037)SVG矩形
(038)开发能力换取报酬
(039)关闭输入框的浏览器默认样式
(040)粒子动画喷射器尾部
(041)禁止桌面端缩放JS
(042)桌面全屏网页CSS
(043)自缩放等宽高比div显示图片
(044)文本两端对齐样式
(045)单行ellipsis
(046)多行ellipsis
(047)字体变形样式
(048)去掉a标签的默认样式
(049)中文字符:空格
(050)DIV层叠DIV
(051)JS中计算1rem的像素值
(052)JS操作DOM父节点、相邻节点
(053)JS中DOM元素的绝对坐标
(054)ToolTips Div
(055)Unity发布为WebGL游戏注意事项
(056)Nginx播放流媒体设置
(057)滚动条样式
(058)JS操作数组的常用方法
(059)SVG填充样式定义
(060)SVG画线样式定义
(061)SVG画直线
(062)CSS图片背景的拼接
(063)WebSocket
(064)JS计算DPI的方法
(065)GIF透明或者不透明
(066)Nginx解决CORS跨域问题
(067)从JSONP的跨域请求数据讲起
    Ionic除去打包的壳也是一套H5的UI,它用的代码框架是Angular。
    在做Ionic版Up-Task软件的时候,发现双指随意就能放大屏幕内容,屏幕内容放大后并没有自动缩小。而且,所有的手机浏览器都是一样的效果。
    于是,百度查找了解决的办法。最后,在试验之后得到了简单的一个CSS设置禁止双指缩放屏幕的代码:

    html {
        touch-action: none;
        /*touch-action的取值有(可以取多个):
            auto(自动)、
            none(禁止所有动作,所以直接禁止了缩放)、
            pan-x(允许x轴动作)、
            pan-y(允许y轴动作)、
            manipulation(只允许滚动和手势缩放)、
            pinch-zoom(启用双击缩放)
        */
        height: 100%;
        width: 100%;
    }

    none:此方法禁用缩放的同时,会禁用拖动页面滚动。
    
    而,适用于文章类型的禁用缩放效果,只能通过js来实现。因为,需要允许用户上下滑动来浏览页面,所以,不能完全禁用touch-action。而,pan-y样式会放开Android浏览器上的双指缩放功能。所以,只能通过js来判断和控制触摸动作:

    document.documentElement.addEventListener('touchstart', function(event) {
        if (event.touches.length > 1) {//触摸点数大于1时,禁止触摸事件
            event.preventDefault();
        }
    }, { passive: false });

    ————www.v-signon.com学习者共勉
                        
«
——张人杰·www.v-signon.com学习者共勉
返回上一页
工业和信息化部备案管理系统网站 京ICP备19038994号-2
个人作品网站:www.up-task.com 主办单位:个人 English