苹果手机点击input框页面放大问题及设置font-size失效问题

iPhone里使用Safari打开网页，点击页面里的 input 和 textarea 文本输入框，当输入框获取焦点时，页面会整体放大，失去焦点后不会恢复原来的大小，需要手动缩小。

出现这个问题的原因是iPhone对输入框有自动放大的功能，iPhone认为通过这种方法处理对用户会有更好的使用体验（但是失去焦点后又不恢复大小，莫名其妙的感觉）。

有两种方法可以来这里问题，一种是设置meta头，在iphone16上亲测有效，第二种是通过js来处理。

方法1:使用meta设置

在head头加上一个禁止缩放的meta标签

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

viewport meta标签：浏览器的viewport指的是可以看到 Web 内容的窗口区域，通常与渲染出的页面的大小不同，这种情况下，浏览器会提供滚动条以滚动访问所有内容。

width属性：控制视口的宽度。可以像width=600这样设为确切的像素数，或者设为device-width特殊值，代表缩放为100%时以CSS像素计量的屏幕宽度。

相应的也有height属性及device-height属性，对包含基于视口高度调整大小及位置的元素的页面有用。

initial-scale属性：页面最初加载时的缩放等级，即当页面第一次load的时候的缩放比例。

maximum-scale属性：允许用户缩放到的最大比例。

minimum-scale属性：允许用户缩放到的最小比例。

user-scalable属性：用户是否可以手动缩放。

方法2：js处理

//当页面加载完成后触发该函数
window.onload = function () {
    //e.preventDefault() --- 阻止默认事件
    //当一个手指放在屏幕上时，会触发touchstart事件。如果另一个手指又放在了屏幕上，则会先触发gesturestart事件，随后触发基于该手指的touchstart事件。
    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事件，紧接着又会触发toucheend事件。
    var lastTouchEnd = 0;
    document.addEventListener('touchend', function (event) {
        var now = (new Date()).getTime();
        if (now - lastTouchEnd <= 300) {
            event.preventDefault();
        }
        lastTouchEnd = now;
    }, false);
};

如果你对input/textear控件设置了 font-size，在iphone上可能不会生效，解决方案如下：

1、给失效的元素加上 text-size-adjust: none;属性

2、去除输入框样式，input框兼容css代码：-webkit-appearance: none;

这时候，再设置font-size就可以成功改变字体大小了。

iPhone JavaScript