android点击将页面缩小到,彻底完美解决安卓苹果手机点击输入框网页页面自动放大缩小...

为了方便用户的查看浏览器在移动默认设置用户可以放大或者缩小，

但是随着前端届的日新月异的变化，反而随意放大缩小成了我们需要解决的问题；

安卓手机解决方案：

//以下为注释//在移动浏览器上页面渲染是在一个叫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端：

//当页面加载完成后触发该函数

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 = (newDate()).getTime();//如果在300ms内触发两次touchend，就阻止默认事件

if (now - lastTouchEnd <= 300) {

event.preventDefault();

}

lastTouchEnd=now;

},false);

};

希望大家使用有效果可以留言支持，或者请我喝杯咖啡~

很多坚持，是因为有肯定！