在网页适配移动端时遇到一个问题：本来页面打开是正常显示的，但是当你聚焦了textarea输入框的时候，页面自动放大了，破坏了原本正常的页面，这不是我们想要的，有什么方法解决呢？
1. 设置meta标签
网上很多人提到使用如下方法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
这里简单说明一下mate标签里面各项的含义：
| 项目 | 描述 |
|---|---|
| viewport | 表示可视区域 |
| width | 可视区域的宽度，值可为数字或关键词device-width（设备的宽度） |
| initial-scale | 初始的缩放比例 （范围从>0到 10 ） |
| minimum-scale | 允许用户缩放到的最小比例 |
| maximum-scale | 允许用户缩放到的最大比例 |
| user-scalable | 用户是否可以手动缩放 |
| apple-mobile-web-app-capable | 表示苹果工具栏和菜单栏，默认content为no，即显示工具栏和菜单栏。设置将content设置成yes即为不显示 |
然而，本人采用了以上方法并没有效果，你们自己可以试试。
2. 设置font-size
将输入框的font-size属性值设为16px，此时再聚焦输入框时就不会自动放大了，亲测有效，具体原因暂时没去了解。
备注：本方法仅在iOS 12.2版本的XR机型中测试有效，其他机型请自行试验。
若对你有帮助，可以支持一下作者创作更多好文章哦~
