解决移动端项目中苹果ios和安卓android手机点击输入框网页页面自动放大缩小

一、需求问题

在公司的项目开发中，我们经常需要开发移动端的项目。但是，在移动端中，点击输入框的时候，网页页面会自动放大或者缩小。这个也并不是我们所想要的，我们只需要向输入框中输入内容就可以了。

二、需求分析

针对移动端的这个问题，我们需要分两种情况进行考虑，安卓端和苹果端。如果是对于安卓手机端，我们可以设置名为viewport的meta标签，设置 minimum-scale、maximum-scale和user-scalable的值就可以了。如果是苹果手机端，只设置meta标签的一些值是不起作用的，解决不了移动端点击输入框自动放大缩小。这个时候，我们可以写一个js封装函数去解决，当页面加载完以后就会触发该函数。

三、需求实现

1. 安卓手机端

设置代码如下所示：

<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,// 设置页面的初始缩放值，为一个数字，设置值为1.0initial-scale=1.0,//允许用户的最小缩放值，为一个数字，设置值为1.0minimum-scale=1.0,//允许用户的最大缩放值，为一个数字，设置值为1.0maximum-scale=1.0,//是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许
user-scalable=no"/>

2. 苹果手机ios端

设置的代码如下所示：

<script>// 当页面加载完成后触发该函数window.onload = function () {// e.preventDefault()  ===    阻止默认事件// 当一个手指放在屏幕上时，会触发 touchstart 事件。如果另一个手指又放在了屏幕上，则会先触发 gesturestart 事件document.addEventListener('gesturestart', function (e) {e.preventDefault();});// 在单个元素上单击两次 ===  dblclickdocument.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>

解决移动端项目中苹果ios和安卓android手机点击输入框网页页面自动放大缩小相关推荐

解决手机端点击输入框后页面会被放大问题
在测试手机端页面输入框时,点击后整个页面被放大,并且在离开输入框.点击页面其他地方,页面并不会恢复原来的比例,很影响美观解决方法:只需在页面头部加入两句 <meta> 标签语句即可,若是 ...
移动端项目中使用rem布局，华为手机不兼容。
在上一次做人脸审核的项目(h5)的时候,需要适配各种设备手机的屏幕, 刚开始的时候使用的那套(不兼容华为)rem的计算逻辑,在测试的时候却发现在华为一些部分机型不适配,超出了屏幕. 后来在网上查阅资料 ...
微信小程序中苹果iOS手机显示时间格式NaN不正确的问题
项目场景: 实现安卓Android和苹果iOS中微信小程序显示订单时间信息问题描述微信小程序中苹果iOS手机显示时间格式NaN不正确的问题原因分析: 安卓微信小程序显示正常,苹果按格式YYYY- ...
在Flutter项目中开发IOS桌面组件(WidgetExtension)
在Flutter项目中开发IOS桌面组件(WidgetExtension) 具体的WidgetExtension的开发流程这里就不细说了,可以参考文末的链接. 在Flutter项目开发IOSWidge ...
vue 不生效打包样式_解决在vue项目中webpack打包后字体不生效的问题
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unic ...
成功解决wps文档中输入英文单词出现对应英文单词下边红色波浪线(英文拼写自动检测)去掉或加上图文教程
成功解决wps文档中输入英文单词出现对应英文单词下边红色波浪线(英文拼写自动检测)去掉或加上图文教程目录解决问题解决方法解决问题 wps文档中输入英文单词出现对应英文单词下边红色波浪线解决方 ...
手机克隆android iphone,苹果官方应用让 Android 手机一键克隆到 iOS
原标题:苹果官方应用让 Android 手机一键克隆到 iOS 作为iOS 9 的一部分,苹果今天发布了一款应用"Move to iOS",为 Android 用户提供无缝迁移的服 ...
苹果几最好用_第一个敢说超越苹果iOS的安卓系统，MIUI12是最好用的安卓UI！
4月27日小米发布了最新的MIUI12系统版本,在这次发布会上,小米致敬了乔布斯,认为软件是非常重要的,并且声称要挑战最强的苹果iOS系统.不仅如此,小米MIUI12还成为了第一个敢说超越苹果iOS的 ...
Charles最新破解版苹果iphone安卓android手机抓包分析教程笔记
Charles最新破解版苹果iphone安卓android手机抓包分析教程笔记中间遇到各种问题导致最终没法看到抓包信息,一个坑一个坑的埋,终于成功抓包小程序. 梳理了下可以尽量减少栽坑的安装过程,如 ...

解决移动端项目中苹果ios和安卓android手机点击输入框网页页面自动放大缩小

解决移动端项目中苹果ios和安卓android手机点击输入框网页页面自动放大缩小相关推荐

最新文章

热门文章