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

时间:2021-09-14 04:25:12

目录

问题描述

问题分析

解决方案

?

问题描述

最近有一个项目需要给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