使用Materialize CSS的Web应用iOS端text-input自动聚焦缩放问题求解

1. 修正viewport元标签配置 #

在页面<head>中写入以下viewport规则，注意必须配置全量参数才会对iOS生效：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

该配置会全局禁止页面缩放，符合内部业务系统的使用场景，是见效最快的解决方案。

2. 覆盖Materialize CSS输入框专属样式 #

全局*选择器优先级低于Materialize内置的表单元素样式规则，需针对性指定选择器覆盖：

/* 适配所有Materialize内置表单输入元素 */
input:not([type]), 
input[type=text]:not(.browser-default),
input[type=password]:not(.browser-default),
input[type=email]:not(.browser-default),
input[type=search]:not(.browser-default),
textarea.materialize-textarea {
  font-size: 16px !important;
  /* WebKit专属属性，禁止浏览器自动调整文字大小 */
  -webkit-text-size-adjust: 100% !important;
}

3. 响应式适配校验 #

需要针对text-input做媒体查询校验，确保所有响应式断点下，输入框的字号都不低于16px。如果之前的适配规则中存在小屏下把输入框字号调整到16px以下的逻辑，修改对应规则即可。

可选方案（保留用户手动缩放能力） #

如果不想全局禁止用户缩放页面，可通过JS动态控制viewport规则，仅在输入框聚焦时临时禁用缩放：

// 输入框聚焦时禁用自动缩放
document.addEventListener('focusin', e => {
  if (['INPUT', 'TEXTAREA'].includes(e.target.tagName)) {
    document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1')
  }
})
// 输入框失焦后恢复缩放权限
document.addEventListener('focusout', e => {
  if (['INPUT', 'TEXTAREA'].includes(e.target.tagName)) {
    document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width, initial-scale=1')
  }
})

内容的提问来源于stack exchange，提问作者Andrew Botterill