徹底完美解決安卓蘋果手機點擊輸入框網頁頁面自動放大縮小

為了方便用戶的查看瀏覽器在移動默認設置用戶可以放大或者縮小，

但是隨着前端屆的日新月異的變化，反而隨意放大縮小成了我們需要解決的問題；

 

安卓手機解決方案：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>

　　

// 以下為注釋

//在移動瀏覽器上頁面渲染是在一個叫viewport的頁面繪制區域內。
<meta name="viewport"

// 設置layout viewport 的寬度，為一個正整數，使用字符串”width-device”表示設備寬度
 content="width=device-width,

// 設置頁面的初始縮放值，為一個數字，可以帶小數
 initial-scale=1.0,

//允許用戶的最小縮放值，為一個數字，可以帶小數

 minimum-scale=1.0,

//允許用戶的最大縮放值，為一個數字，可以帶小數
 maximum-scale=1.0,

//是否允許用戶進行縮放，值為”no”或”yes”, no 代表不允許，yes代表允許
user-scalable=no"/>

　　

　

其實使用meta標簽可以解決安卓手機的的放啊或者縮小的問題，但是meta標簽在蘋果手機上的作用卻是 const meta = 0(哈哈，就是沒有作用)蘋果手機還有點擊input輸入框自動放大的功能，認為這樣用戶體驗好。

 

其實不然，這也是我們煞費苦心需要解決，這時候使用meta=viewport,是沒有效果的，我們網上千奇百怪的方法感覺都沒有效果，這里向大家分享一下，終極干貨，使用JS使IOS無法縮小放大；

 

IOS端解決方案：

注意：IOS端input字體最小為16px，否則系統會自動觸發聚焦放大

<script>
    // 當頁面加載完成后觸發該函數
    window.onload = function () {

        // e.preventDefault()  ===    阻止默認事件

        // 當一個手指放在屏幕上時，會觸發 touchstart 事件。如 果另一個手指又放在了屏幕上，則會先觸發 gesturestart 事件
        document.addEventListener('gesturestart', function (e) {
            e.preventDefault();
        });

        // 在單個元素上單擊兩次 ===  dblclick
        document.addEventListener('dblclick', function (e) {
            e.preventDefault();
        });

        // 一個手指放在屏幕上時，會觸發 touchstart 事件
        document.addEventListener('touchstart', function (event) {
            if (event.touches.length > 1) {
                event.preventDefault();
            }
        });

        // 如果一個或兩個手指在屏幕上滑動，將會觸發 gesturechange 事件。
        // 但只要有一個手指移開， 就會觸發 gestureend 事件，緊接着又會觸發基於該手指的 touchend 事件。
        var lastTouchEnd = 0;
        document.addEventListener('touchend', function (event) {
            var now = (new Date()).getTime();
            // 如果在300ms內觸發兩次touchend，就阻止默認事件
            if (now - lastTouchEnd <= 300) {
                event.preventDefault();
            }
            lastTouchEnd = now;
        }, false);
    };

</script>

　　

 

希望大家使用有效果可以留言支持，或者請我喝杯咖啡~

 

很多堅持，是因為有肯定！