關於瀏覽器的雙指縮放

2022-07-07 00:30:12 字數 1179 閱讀 5113

在討論解決方案前,先說明一下 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

以上資料**於mdn

不少解決方案均是設定所有縮放等級為 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瀏覽器的自動還原縮放只在使用控制台切換到手機除錯模式下才生效。

linux觸控螢幕兩指縮放 關於瀏覽器的雙指縮放

在討論解決方案前,先說明一下 name 為 viewport 的 meta 標籤吧,這個標籤通常是用來對頁面進行縮放適配,其有以下幾個屬性 width 用於控制視口的寬度 可以理解為 html 標籤父元素的寬度 可以設定為數值或 device width。通常設定為 device width,指代縮...

JS設定瀏覽器縮放比例

因為 windows10 的作業系統,儘管是19201080的解析度,但是發現我的頁面顯示是正常的,但是我同學開啟說滾動條特別多,然後就特別的醜陋,尤其是出現了橫向的滾動條,這個就很難讓人接受,但是我這邊就顯示正常,核對了一下,我們用的都是19201080的解析度,理論上是不會出現這種問題的,於是想...

關於瀏覽器

1 瀏覽器廠商識別號 moz 相容火狐ff android webkit 相容safari chrome o 相容opera ms 相容ie 2 瀏覽器同源策略 第乙個限制 不能通過ajax的方法去請求不同源的文件 第二個限制 瀏覽器中不同域的框架之間是不能進行js互動操作的。document.do...