[Pit] ios step h5 h5 fitted on the page ios cause problems when the input focus automatically enlarge

Problem Description

problem analysis

solution

Problem Description

Recently, a project needs to ios and Android app development h5 page, the Android test no problem, but ios click on the input box (iphone8) will result page zoom failed, but on the iphone 8plus / x will not have this problem. And sets <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width" />and <meta name="apple-mobile-web-app-capable" content="yes" />were unable to prevent this problem

problem analysis

Cause the page to automatically scale of the problem comes from, ios click on the input box on a small screen devices (such as iphone 5s / 6 / 6s / 7/8 ...) when the time if the input is less than 16px font page will automatically zoom to improve readability. But in actual different scenes, our ui design font may be lower than 16px.

solution

Now solutions are found out basically set meta, this solution does not solve the problem enlarge the font smaller than 16px page, then we have to think about the root of the problem is not enough font 16px.

So we have to do is click input when the input of the font to 16px, then focus time and then change it back to our own, in that moment, ios judge to input the input box font to 16px, so as not to enlarge our page, the pseudo-code is as follows:

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