關於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