viewport的相關知識點

2022-01-13 17:08:34 字數 1595 閱讀 7380

主要說一些viewport的基本原理以及使用

㈠概念

手機瀏覽器是把頁面放在乙個虛擬的「視窗」(viewport)中,通常這個虛擬的「視窗」(viewport)比螢幕寬,這樣就不用把每個網頁擠到很小的視窗中(這樣會破壞沒有針對手機瀏覽器優化的網頁的布局),使用者可以通過平移和縮放來看網頁的不同部分。移動版的 safari 瀏覽器最新引進了 viewport 這個 meta tag,讓網頁開發者來控制 viewport 的大小和縮放,其他手機瀏覽器也基本支援。

移動端瀏覽器通常都在乙個比螢幕更寬的虛擬視窗中渲染頁面,這個虛擬視窗就是viewport,目的是正常展示沒有做移動端適配的網頁,可以讓他們完整的展現給使用者。我們有時用移動裝置訪問桌面版網頁就會看到乙個橫向滾動條,這裡可顯示區域的寬度就是viewport的寬度。

㈡利用meta標籤對viewport進行控制

我們經常會見到這樣一行**:

該meta標籤的作用是讓當前viewport的寬度等於裝置的寬度,同時不允許使用者手動縮放。

以下為viewport的幾個屬性,這些屬性可以混合來使用,多個屬性同時使用要用逗號隔開

㈢width和initial-scale

當設定了widthinitial-scale時,瀏覽器會自動選擇數值最大的進行適配。

如設定:

瀏覽器會選擇數值大的進行適配,如果當前視窗ideal viewport寬度為300,initial-scale值為1,取得是width為400的值;如果當前視窗的ideal viewport為480,則取480。

事實上,width=device-widthinitial-scale=1都代表應用ideal viewport,但在ipad、iphone等移動裝置和ie上,橫豎屏不分,預設都取豎屏的寬度,相容性最好的寫法就是

總結:在iphone和ipad上,無論你給viewport設的寬的是多少,如果沒有指定預設的縮放值,則iphone和ipad會自動計算這個縮放值,以達到當前頁面不會出現橫向滾動條(或者說viewport的寬度就是螢幕的寬度)的目的。

希望有所幫助。

相關知識點

nweb inf uclasses uweb.xml ulib n 從httpservlet 繼承,重寫doget dopost方法 n部署web.xml n 只有乙個物件 n 第一次請求的時候被初始化,只一遍 n 初始化後先呼叫init 方法,只一遍 n 每個請求,呼叫一遍service serv...

Camera相關知識點

1 camera涉及到的概念 1.1 preview capture video preview 預覽 capture 拍照 video 錄影 1.2 幀率 快門 幀率 frame rate 用於測量顯示幀數的量度。所謂的顯示單位為每秒顯示的幀數,簡稱fps或hz 快門 shutter。快門是攝像器...

CURL相關知識點

1,建立乙個curl的會話資源 ch curl init 設定url,引數傳遞出來的時候 curl setopt ch,curlopt url,url 使用post提交的資料 curl setopt ch,curlopt post,1 if post data 設定是否將響應結果存入變數,1或者tr...