H5页面iphone(苹果)手机点击输入框输入内容时页面自动放大

问题:

H5页面,iPhone手机点击input搜索框,输入内容时,页面会自动放大。

解决:

方法一:

html文件中 加上移动端元信息

方法二:

浏览器也许认为,只有input/textarea中的字体大于等于 16px 时用户才能看得清楚。
所以可以通过设置字体大小来阻止页面放大:

input, input:focus,
textarea, textarea:focus,
select, select:focus {
  font-size: 16px !important;
}


总结:苹果手机好像有点击输入框自动放大的功能,认为这样用户体验好。我觉得起作用的地方,主要在于"user-scalable=no"禁止页面手动缩放使得不能缩放,这样在苹果手机上就不会自动放大了。

你可能感兴趣的:(移动端H5,html5)