在討論解決方案前,先說明一下 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瀏覽器的自動還原縮放只在使用控制台切換到手機除錯模式下才生效。
關於觸控螢幕除錯
define tsp sample num 20 define tsp adc delay 4000 至於呼叫的timer中斷,每秒次數降到50次即可 define tsp sample rate low 50 50 samples per sec define tsp sample rate hi...
linux觸控螢幕輸入裝置,觸控螢幕校驗方法
本文拋開技術層次上來說說linux觸控螢幕裝置驅動原理 觸控螢幕,就是用一塊ad轉換晶元來將螢幕上的觸控訊號轉成數碼訊號。觸控螢幕常用的是四線電阻,ad轉換晶元 常用的是7843,7846,ts2003等。當觸控時候,這些晶元會將模擬訊號轉換成數碼訊號,就是通常說的ad轉換。在linux中,通常是通...
Linux 觸控螢幕驅動程式設計
一 輸入子系統模型解析 1.為什麼需要輸入子系統 完成乙個裝置驅動基本上需要三步 1.註冊乙個字元裝置模型 2.open 或者read對使用者程式的操作 3.對不同的硬體裝置進行操作 但這時候為求方便發現了乙個不同硬體的共性 所以引進了輸入子系統的概念 2.輸入子系統模型的概述 3.輸入子系統模型的...