问题:
H5页面,iPhone手机点击input搜索框,输入内容时,页面会自动放大。
解决:
方法一:
html文件中 加上移动端元信息
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
方法二:
浏览器也许认为,只有input/textarea中的字体大于等于 16px 时用户才能看得清楚。
所以可以通过设置字体大小来阻止页面放大:
input, input:focus,
textarea, textarea:focus,
select, select:focus {font-size: 16px !important;
}
总结:苹果手机好像有点击输入框自动放大的功能,认为这样用户体验好。我觉得起作用的地方,主要在于"user-scalable=no"禁止页面手动缩放使得不能缩放,这样在苹果手机上就不会自动放大了。