input輸入內容時放大問題及處理

最近做的微信網站有一個關於input輸入框頁面放大的問題。比如登錄頁面剛打開時正常，但用戶輸入信息登錄時，頁面就會放大。解決這個問題，首先需要在頭部加一個

<meta name="viewport" content="width=720,inital-scale=1.0,user-scalable=no;">

或者：

<meta name="viewport" content="user-scalable=no;">

目的就是不要用戶自行放大或縮小頁面。

再加一個如下的css樣式：

input,input:focus,input:active{user-select: text;}

還有種情況就是給input加了字體大小的樣式單位是vmin的，比如：

input{font-size：3vmin;}

安卓手機也會出現有輸入時input內是字體會有放大或縮小的情況。這種情況的解決辦法就是把字體單位改成px即可，如：

input{font-size：36px;}/*順便分享一下個人實驗的結果，字體單位：1vmin大約等同於10px*/

如此便可解決問題。

問題就解決了，有類似問題的同學可以試試。

 

js的解決辦法：

首先在頭部加一個js來獲取手機的不同型號對應的並屏幕大小，然后給其加不同的meta屬性。如下：

<script>
    if(/Android (\d+\.\d+)/.test(navigator.userAgent)){
       var version = parseFloat(RegExp.$1);
    if(version>2.3){
       var phoneScale = parseInt(window.screen.width)/720;
       document.write('<meta name="viewport" content="width=720, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', user-scalable=no, target-densitydpi=device-dpi">');
       }else{
            document.write('<meta name="viewport" content="width=720, target-densitydpi=device-dpi">');
       }
       }else{
            document.write('<meta name="viewport" content="width=720, user-scalable=no, target-densitydpi=device-dpi">');
       }
</script>

 

其次就是需要改你的css。即將你的css中所有定了頁面最大寬度的具體值全部改成100%.
這樣就能解決問題了，經測試這個方法對所有常用機型都適用。