记自己开发过程遇到的移动端iPhone手机页面样式问题：
1、IOS手机点击input和 textarea等文本输入框聚焦focus()时，页面会整体放大的问题，且失焦后需手动放小。
原因：苹果手机有点击输入框自动放大的功能，认为这样用户体验好。
（1）使用meta设置，在head头加上一个禁止缩放的meta标签：
<meta name="viewport" content="width=device-width, initial-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代码修改：
<script>
//当页面加载完成后触发该函数
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);
};
</script>
注：我只加了meta标签 但是发现没有用，因此把上面的js代码也加上去，就解决放大的问题了
2、IOS手机input输入框设置font-size样式不生效问题：
解决方案：
1、给失效的元素加上 text-size-adjust: none;属性
2、去除输入框样式，input框兼容css代码：-webkit-appearance: none;
这时候，再设置font-size就可以成功改变字体大小了。