什麼是viewport,為什麼需要viewport

2021-08-26 19:23:35 字數 1363 閱讀 2664

以一代iphone下的safari來說就是:

在iphone的320px物理螢幕上——視覺視窗(visual viewport),建立出了乙個980px的虛擬視窗——布局視窗(layout viewport),在視覺視窗(visual viewport)中我們可以拖動橫向豎向滑動條或者放大縮小網頁,來達到最佳的瀏覽效果(類似桌面瀏覽器);而布局視窗(layout viewport)用來配合css渲染布局,例如當我們設定乙個容器的寬度為100%時,這個容器的實際值為980px而不是320px。如此一來大部分 網頁就能以縮放的形式正常的顯示在手機螢幕上了。

如何設定viewport

有了layout viewport似乎解決手機瀏覽網頁的難題,但如果遇到專門為手機優化的網頁就又有新的問題:

是的,因為iphone的layout viewport預設為980px,導致專為其優化的320px寬的頁面只能以縮放的方式顯示,這時就需要對viewport進行設定:

這個是最常見的一條viewport meta**,將viewport定義為:寬度為裝置寬度,初始縮放比例為1倍,禁止使用者縮放。設定好後我們的頁面就顯示完美了:

viewport全部屬性&值如下:

width: viewport寬度

height: viewport高度

initial-scale: 初始縮放比例

maximum-scale: 最大縮放比例

minimum-scale: 最小縮放比例

user-scalable: 是否允許使用者縮放

例:

width=960 或 device-width

height=1000 或 device-height

initial-scale=0.5

maximum-scale=2

minimum-scale=1

user-scalable=1 或 0 (yes 或 no)

layout viewport的預設值
safari iphone: 980px

opera: 850px

android webkit: 800px

ie: 974px

最後關注下width=device-width註解① 除此之外不同移動瀏覽器廠商也有不同的解決方案,例如ucweb就是使用中介軟體技術。

②不同的瀏覽器廠商對於layout viewport的大小定義不同,詳見」layout viewport的預設值」。

為什麼要安裝python軟體 為什麼軟體需要安裝?

主要是為了方便使用者操作,畢竟安裝程式是使用者接觸這個應用程式之前的第乙個應用程式,自然是希望操作越簡單越好,最好是可以不停地下一步或者繼續就可以安裝成功 這也給了那些惡意軟體操作的空間,如 安裝 在安裝期間,最常見的就是設定安裝路徑,還有的呢會進行修改 windows 設定,如一些環境 node,...

HTTPS埠443保護什麼,為什麼我們需要它

https為在瀏覽器和伺服器之間共享的資料或敏感資訊提供安全性。它通過加密交換和授予隱私來確保您的isp 或網路上的任何其他人 不會閱讀或干擾會話。但是請不要誤解此安全鎖定功能。它確實可以加密通訊通道,但是不能保證攻擊者不會管理您連線的 此外,如果您的站點上存在薄弱環節,黑客將利用它們並破壞您的資料...

為什麼是 pgsql ?

postgresql在國外很流行 在日本是僅次於apache的開源軟體 pgsql 使用程序 postgresql資料庫是多程序的架構.每乙個客戶連線都有乙個服務程序為其進行服務,也有共享記憶體,這一點是與orancle資料庫是相似的.postgresql使用一種客戶端 伺服器的模式.乙個伺服器程序...