苹果手机点击输入框页面自动放大

问题描述

一个项目里用了bootstrap的日期插件bootstrap-datetimepicker，在显示日期的那个input输入框被点击时在苹果手机上页面会被放大，该input输入框type等于text。后来发现忘记加了一些东西。

解决办法

一开始我的meta标签是这样的

<meta name="viewport" content="width=device-width, initial-scale=1.0">

后来改成了这样

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

总结

苹果手机好像有点击输入框自动放大的功能，认为这样用户体验好。我觉得起作用的地方，主要在于initial-scale=1,maximum-scale=1,使得缩放比例为1，这样在苹果手机上就不会自动放大了。