一、需求问题
在公司的项目开发中，我们经常需要开发移动端的项目。但是，在移动端中，点击输入框的时候，网页页面会自动放大或者缩小。这个也并不是我们所想要的，我们只需要向输入框中输入内容就可以了。
二、需求分析
针对移动端的这个问题，我们需要分两种情况进行考虑，安卓端和苹果端。如果是对于安卓手机端，我们可以设置名为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>
