viewport 學習筆記

2021-08-20 19:57:08 字數 872 閱讀 1362

viewport 是使用者網頁的可視區域。

viewport 翻譯為中文可以叫做"視區"。

問題:先隨便寫個網頁。

viewport: viewport 是使用者網頁的可視區域。 viewport 翻譯為中文可以叫做"視區"。 手機瀏覽器是把頁面放在乙個虛擬的"視窗"(viewport)中,通常這個虛擬的"視窗"(viewport)比螢幕寬,這樣就不用把每個網頁擠到很小的視窗中(這樣會破壞沒有針對手機瀏覽器優化的網頁的布局),使用者可以通過平移和縮放來看網頁的不同部分。		-

在網頁中開啟

但在手機中開啟,這裡用chrome除錯的方法開啟

明顯這個網頁不適合手機端。

解決:手機瀏覽器是把頁面放在乙個虛擬的"視窗"(viewport)中,通常這個虛擬的"視窗"(viewport)比螢幕寬,這樣就不用把每個網頁擠到很小的視窗中(這樣會破壞沒有針對手機瀏覽器優化的網頁的布局),使用者可以通過平移和縮放來看網頁的不同部分。

也就是手機大小雖然差不多是380px,但手機會假裝自己有980px,這樣在看沒有手機優化的頁面可以盡可能顯示更多的內容。

在中新增,一般來講是固定的。

引數介紹:

最後再結合media使用。就解決了手機檢視的問題,不過像baidu這樣的會使用兩套**以便更好的適合手機端檢視。

viewport屬性說明

手機瀏覽器是把頁面放在乙個虛擬的 視窗 viewport 中,通常這個虛擬的 視窗 viewport 比螢幕寬,這樣就不用把每個網頁擠到很小的視窗中 這樣會破壞沒有針對手機瀏覽器優化的網頁的布局 使用者可以通過平移和縮放來看網頁的不同部分。移動版的 safari 瀏覽器最新引進了 viewport ...

viewport 虛擬視窗

viewport 語法介紹 content height pixel value device height width pixel value device width initial scale float value minimum scale float value maximum scal...

viewport簡單介紹

標籤的viewport簡單介紹 一.什麼是viewport 手機瀏覽器是把頁面放在乙個虛擬的 視窗 viewport 中,通常這個虛擬的 視窗 viewport 比螢幕寬,這樣就不用把每個網頁擠到很小的視窗中 這樣會破壞沒有針對手機瀏覽器優化的網頁的布局 使用者可以通過平移和縮放來看網頁的不同部分。...