ios html5 input 聚焦,关于ios上嵌入h5导致input聚焦时页面自动放大问题

目录

问题描述

问题分析

解决方案

问题描述

最近有一个项目需要给ios和安卓app开发h5页面，在安卓上测试没有问题，但是ios(iphone8)上点击输入框会导致页面缩放失败，但在iphone 8plus/x上不会产生这种问题。并且设置 和均无法阻止这种问题

问题分析

导致页面自动缩放的问题来源于，ios在小屏设备(如iphone 5s/6/6s/7/8...)上点击输入框的时候，如果input字体小于16px的时候会自动放大页面，提升阅读性。但实际不同场景下，我们的ui设计字体可能低于16px。

解决方案

现在的解决方案基本上搜出来的都是设置meta，这种方案并不能解决小于16px字体产生放大页面的问题，那么我们不得不思考问题的根源字体不够16px。

那么我们要做的就是在点击input的时候，把input的字体设置为16px，然后focus的时候再改回我们自己的，在那一瞬间，ios判断到input输入框字体为16px，从而不放大我们的页面，伪代码如下：

import React, { memo, useState, useCallback } from 'react'

const Test = memo(() => {

const [value, setValue] = useState('')

const handleInputChange = useCallback(e => {

setValue(e.target.value)

})

/** 解决ios 字体小于16px自动缩放问题 */

const handleInputMouseDown = useCallback((e) => {

e.target.style.fontSize = '16px' // mouse down时，把字体改为16px，使得ios不会自动放大页面

}, [])

/** 解决ios 字体小于16px自动缩放问题 */

const handleInputFocus = useCallback((e) => {

e.target.style.fontSize = '' // focus时，把字体恢复为原先的字体

}, [])

return (

<>

value={value}

placeholder="字体为14px场景"

onChange={handleInputChange.bind(this) }

onMouseDown={handleInputMouseDown.bind(this)}

onFocus={handleInputFocus.bind(this)}

/>

>

)

})

export default Test