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

目录

问题描述

问题分析

解决方案

 

问题描述

最近有一个项目需要给ios和安卓app开发h5页面，在安卓上测试没有问题，但是ios（iphone8）上点击输入框会导致页面缩放失败，但在iphone 8plus/x上不会产生这种问题。并且设置 <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width" />和<meta name="apple-mobile-web-app-capable" content="yes" />均无法阻止这种问题

问题分析

导致页面自动缩放的问题来源于，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 (
        <>
            <input 
                value={value} 
                placeholder="字体为14px场景" 
                onChange={handleInputChange.bind(this) } 
                onMouseDown={handleInputMouseDown.bind(this)} 
                onFocus={handleInputFocus.bind(this)} 
             />
        </>
    )
})

export default Test