linux觸摸屏兩指縮放_關于浏覽器的雙指縮放

今天在測試前兩天做的全屏展示圖檔功能的時候，突然發現，當我進入全屏展示圖檔時，雙指放大圖檔之後取消全屏展示之後，整個頁面都會放大。這一點都不使用者友好！是以我去搜了搜浏覽器原生雙指放大相關的資料，在浏覽不少網頁後，終于有了思路(來源：谷歌快照-簡書)。

在讨論解決方案前，先說明一下 name 為 viewport 的 meta 标簽吧，這個标簽通常是用來對頁面進行縮放适配，其有以下幾個屬性

width：用于控制視口的寬度(可以了解為 html 标簽父元素的寬度)，可以設定為數值或 device-width。通常設定為 device-width，指代縮放為 100% 時以 CSS 像素計量的螢幕寬度。

height：類似于 width

initial-scale：用于控制頁面初始加載時的縮放等級，通常設為 1

maximum-scale：控制最大縮放等級

minimum-scale：控制最小縮放等級

user-scalable：控制使用者是否可以縮放頁面，值為 yes 或 no，預設設定為 yes

不少解決方案均是設定所有縮放等級為 1 并禁止縮放，于是我便想，在縮放後設定最大縮放等級為 1 會怎麼樣呢，便去代碼中測試，當關閉全屏展示圖檔時，設定最大縮放等級為 1。

開啟浏覽器測試，放大圖檔後關閉，頁面縮放到等級 1，完美。不過這樣設定後，第二次全屏展示圖檔時，便無法縮放圖檔了，于是便需要在進入全屏展示圖檔時，取消最大縮放等級。

這時，便完成了在關閉全屏展示圖檔後頁面自動縮放到等級 1 的功能，并在再次打開全屏展示圖檔後取消縮放限制。不過，如果使用者在加載頁面後不打開全屏展示圖檔呢？這種情況下使用者還行可以随意放大頁面，為了防止使用者誤操作，便需要在該标簽中設定最大縮放等級為 1，令頁面在剛加載完時便不可縮放到等級 1 以上。

注：手機chrome浏覽器：可行

小米浏覽器：可行

手機火狐浏覽器：效果極差

QQ浏覽器：可行

其他浏覽器是否可行請自行測試

代碼如下

//關閉時

document.querySelector('meta[name="viewport"]').setAttribute('content', "width=device-width,maximum-scale=1")//展示時

document.querySelector('meta[name="viewport"]').setAttribute('content', "width=device-width")

2020-01-10更新

今天在随手在PC端測試了一下，發現完全無效了。。。緊張了一會發現，chrome浏覽器的自動還原縮放隻在使用控制台切換到手機調試模式下才生效。