vue h5移动端禁止缩放代码

安卓

在index.html里面写

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

ios

在APP.vue里面写

<script>
window.onload = function() {
 document.addEventListener('touchstart', function(event) {
 if (event.touches.length > 1) {
  event.preventDefault()
 }
 })
 document.addEventListener('gesturestart', function(event) {
 event.preventDefault()
 })
}
</script>

以上这篇vue h5移动端禁止缩放代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 在Vue项目中,防止页面被缩放和放大示例

    现在vue的脚手架生成项目之后我们会发现index.html页面中. 在head标签中,我们会看到meta标签中有一条显示是 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"> 但是我们发现这条语句中只是让user-scalable=0,这是不让用户进行缩放. 可以页面会在两个手指进行放大!!! 可以页面会在两个手指进行放大!!! 可以

  • vue h5移动端禁止缩放代码

    安卓 在index.html里面写 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> ios 在APP.vue里面写 <script> window.onload = function() { document.addEventListener('touchstart', func

  • vue实现移动端H5数字键盘组件使用详解

    本文实例为大家分享了vue实现移动端H5数字键盘组件的使用代码,供大家参考,具体内容如下 我们平时扫码付款的时候,经常会输入一些数字进行付款,仔细看了下键盘和系统的键盘有点不一样,于是今天买甘蔗的时候扫码付款就想了一下要怎么去实现一个.话不多说,直接上代码. 结果如下: 代码如下: <template> <div class="keyboard-wrapper"> <input type="text" v-model="NUM

  • vue实现PC端录音功能的实例代码

    录音功能一般来说在移动端比较常见,但是在pc端也要实现按住说话的功能呢?项目需求:按住说话,时长不超过60秒,生成语音文件并上传,我这里用的是recorder.js 1.项目中新建一个recorder.js文件,内容如下,也可在百度上直接搜一个 // 兼容 window.URL = window.URL || window.webkitURL navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMed

  • Vue实现PC端靠边悬浮球的代码

    我想把退出登录的按钮做成一个悬浮球的样子,带动画的那种. 实现是这个样子: 手边没有球形图.随便找一个,功能这里演示的为单机悬浮球注销登录 嗯,具体代码: <div :class="['meun-switch animated flex-row',uploadflag ? 'active rubberBand off' : 'leave jello']" @mouseleave="uploadleave" @mouseenter="uploadent

  • Vue实现PC端分辨率自适应的示例代码

    Vue实现PC端分辨率自适应的示例代码

    目录 方案 安装依赖 引入依赖 px转换成rem 修改flexible.js 参考博客 方案 lib-flexible+ px2remLoader lib-flexible:阿里可伸缩布局方案 px2rem-loader:px转rem 安装依赖 npm install px2rem-loader -D npm install lib-flexible -S 引入依赖 main.js引入lib-flexible import 'lib-flexible' px转换成rem vue-loader的o

  • vue中的H5移动端项目 真机测试配置方式

    vue中的H5移动端项目 真机测试配置方式

    目录 H5移动端项目 真机测试配置 vue cli2 vue cli4 vue h5 真机调试 H5移动端项目 真机测试配置 vue cli2 1.配置网段:(手机和电脑在同一局域网内) 2.在项目中重启命令行(或者cmd)运行 ipconfig 获取到项目在本机运行的ip地址 3.关闭防火墙 4.前端:config文件夹下index.js文件 修改host:为0.0.0.0 修改 axios.defaultsbaseURl = "http://172.20.10.9:8082" 5.

  • vue开发移动端h5环境搭建的全过程

    vue开发移动端h5环境搭建的全过程

    目录 技术选型 环境搭建 引入库 配置环境 运行 网络封装 结语 补充 总结 技术选型 公司现在需要开发移动端的h5,使用现在比较流行的vue 2.0开发,使用的脚手架是Vant2,网络访问使用的是axios,路由跳转使用的是vue-router,开发工具是vscode,作为一个安卓开发程序员,对vue是不熟悉的,好在把环境搭建起来了,通过博客记录一下 Vant 2 vue cli vue vue中使用axios最详细教程 vue router 环境搭建 引入库 我这里已经安装好了nodejs,

  • Vue解决移动端弹窗滚动穿透问题

    Vue解决移动端弹窗滚动穿透问题

    一.问题描述 在移动端的H5页面中,我们经常会遇到 "点击按钮-->弹窗-->选择选项" 这样的场景.而在选项过多出现滚动条时,滚动滚动条至容器的底部或者顶部.再往上或往下拖动滚动条时,滚动动作会出现穿透,这时候底部的body也会一起滚动. 问题总结:内容在滚动到容器的顶部或者底部时,再向上或向下 强行滚动 ,则出现滚动穿透 二.解决方案思考 参考了网上一大堆的解决方法,大可分为三类方法.经过认真的思考和分析,个人的总结如下: 使用js去控制和改变css 1. 弹窗出现 1

  • 基于Vue的移动端图片裁剪组件功能

    基于Vue的移动端图片裁剪组件功能

    最近项目上要做一个车牌识别的功能.本来以为很简单,只需要将图片扔给后台就可以了,但是经测试后识别率只有20-40%.因此产品建议拍摄图片后,可以对图片进行拖拽和缩放,然后裁剪车牌部分上传给后台来提高识别率.刚开始的话还是百度了一下看看有没有现成的组件,但是找来找去都没有找到一个合适的,还好这个功能不是很着急,因此自己周末就在家里研究一下. Demo地址:https://vivialex.github.io/demo/imageClipper/index.html 下载地址:https://git

  • 详解vue 在移动端体验上的优化解决方案

    详解vue 在移动端体验上的优化解决方案

    去年年底自己搭了一个vue在移动端的开发框架,感觉体验不是很好.上个星期又要做移动端的项目了.所以我花了两天时间对之前的那个开发框架做了以下优化 自定义vuex-plugins-loading 路由切换动画 + keep alive 动态管理缓存组件 better-scroll与vue的最佳实践(better-scroll的vue化) 自定义指令(vue-finger:包括点击,长按,双击,拖拽移动,多点触控,滑动,旋转,缩放手势) 移动端适配方案 如何分情况处理页面置顶 路由懒加载 自定义 v

随机推荐