彻底完美解决安卓苹果手机点击输入框网页页面自动放大缩小
时间:2022-07-24
本文章向大家介绍彻底完美解决安卓苹果手机点击输入框网页页面自动放大缩小,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
为了方便用户的查看浏览器在移动默认设置用户可以放大或者缩小,
但是随着前端届的日新月异的变化,反而随意放大缩小成了我们需要解决的问题;
安卓手机解决方案:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
// 以下为注释
//在移动浏览器上页面渲染是在一个叫viewport的页面绘制区域内。
<meta name="viewport"
// 设置layout viewport 的宽度,为一个正整数,使用字符串”width-device”表示设备宽度
content="width=device-width,
// 设置页面的初始缩放值,为一个数字,可以带小数
initial-scale=1.0,
//允许用户的最小缩放值,为一个数字,可以带小数
minimum-scale=1.0,
//允许用户的最大缩放值,为一个数字,可以带小数
maximum-scale=1.0,
//是否允许用户进行缩放,值为”no”或”yes”, no 代表不允许,yes代表允许
user-scalable=no"/>
其实使用meta标签可以解决安卓手机的的放啊或者缩小的问题,但是meta标签在苹果手机上的作用却是 const meta = 0(哈哈,就是没有作用)苹果手机还有点击input输入框自动放大的功能,认为这样用户体验好。
其实不然,这也是我们煞费苦心需要解决,这时候使用meta=viewport,是没有效果的,我们网上千奇百怪的方法感觉都没有效果,这里向大家分享一下,终极干货,使用JS使IOS无法缩小放大;
IOS端解决方案:
注意:IOS端input字体最小为16px,否则系统会自动触发聚焦放大
<script>
// 当页面加载完成后触发该函数
window.onload = function () {
// e.preventDefault() === 阻止默认事件
// 当一个手指放在屏幕上时,会触发 touchstart 事件。如 果另一个手指又放在了屏幕上,则会先触发 gesturestart 事件
document.addEventListener('gesturestart', function (e) {
e.preventDefault();
});
// 在单个元素上单击两次 === dblclick
document.addEventListener('dblclick', function (e) {
e.preventDefault();
});
// 一个手指放在屏幕上时,会触发 touchstart 事件
document.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
});
// 如果一个或两个手指在屏幕上滑动,将会触发 gesturechange 事件。
// 但只要有一个手指移开, 就会触发 gestureend 事件,紧接着又会触发基于该手指的 touchend 事件。
var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
var now = (new Date()).getTime();
// 如果在300ms内触发两次touchend,就阻止默认事件
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, false);
};
</script>
希望大家使用有效果可以留言支持,或者请我喝杯咖啡~
很多坚持,是因为有肯定!
- .NET Core采用的全新配置系统[7]: 将配置保存在数据库中
- Selenium3+Python3环境部署
- Java Mail(三):Session、Message详解
- .NET Core采用的全新配置系统[8]: 如何实现配置与源文件的同步
- 四个问答让你秒懂区块链原理及应用
- .NET Core采用的全新配置系统[9]: 为什么针对XML的支持不够好?如何改进?
- 【机器学习实战】第11章 使用 Apriori 算法进行关联分析
- 【Scikit-Learn 中文文档】概率校准 - 监督学习 - 用户指南 | ApacheCN
- ASP.NET MVC路由扩展:链接和URL的生成
- .NET Core采用的全新配置系统[10]: 配置的同步机制是如何实现的?
- C+实现神经网络之贰—前向传播和反向传播
- 通过重建Hosting系统理解HTTP请求在ASP.NET Core管道中的处理流程[上]:采用管道处理请求
- 2017奇葩机器人大盘点:一言不合让你变瞎
- 【机器学习实战】第14章 利用SVD简化数据
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- Spring Http Invoker
- Spring整合RMI
- Spring启用缓存
- 交通标识分类-TensorFlow实现
- Redis使用与操作k-v数据
- Spring集成Hadoop和Hbase
- JVM系列之:JIT中的Virtual Call接口
- 重新构建711的Android项目(二),架构的选择与实现
- Android的配置文件操作封装,摒弃SharedPreference操作配置漫天乱飞
- java实现PBOC的TLV格式解析,超简单的解析(全互联网最简单)
- 链表总计
- Spring整合MongoDb
- 正确使用Qt多线程
- Spring与hibernate与mybatis
- scala 模式匹配的几个模式