移動端viewport解惑

2022-08-02 07:33:09 字數 808 閱讀 4010

再配合**查詢@media就可以寫出適配各種手機端的頁面了。但是,為什麼就能夠了呢?

網上查了很多資料,反覆看了很多遍還是似懂非,知道看了知乎中乙個問題的解答,茅塞頓開。

自己不明白三個點,其中viewport,width,device-width分別代表什麼?

viewport瀏覽器的視窗,顯示網頁內容的區域。width指這個viewport即瀏覽器視窗寬度。

device-width裝置獨立畫素,邏輯畫素。聽著很抽象,那就按照字面理解,裝置的寬度,這個寬度就是我們css常寫px概念是一樣的。如電腦端的螢幕px寬度,手機的螢幕px寬度。它並不指像英吋,厘公尺這樣的物理尺寸。這些都是手機廠商設的,出廠就設定了。之前一直有誤區把device-width和物理尺寸對應起來,所以一直想不明白。

chrome:f12可以看到device-width

下面就簡單說說下自己對下面**的理解。

我們電腦上網一般都是全屏檢視網頁,這個全屏就是電腦的螢幕,電腦瀏覽器視窗=電腦螢幕區域。即viewport=device-width。但是手機瀏覽器視窗》手機螢幕區域。

以前手機瀏覽一些網頁都要通過手指調整檢視內容的區域。這樣使用者體驗就不好。為了改善這樣情況,手機手機廠家就給我想出了解決辦法:

name="viewport" content="width=device-width

這個設定意思就指讓手機瀏覽器的視窗等於手機螢幕大小。這樣一來在手機上檢視就跟我們在電腦上全屏看網頁一樣啦。

我們做手機端的網頁寬度就是根據這個device-width寫的。

見:網上看了很多資料,給的概念太多,建議看以下幾篇文章就差不多了,不懂得多看多想就通。

移動端viewport講解

viewport描述 也就是可視區域。對於桌面瀏覽器,我們都很清楚viewport是什麼,就是除去了所有工具欄 狀態列 滾動條等等之後用於 看網頁的區域,這是真正有效的區域。由於移動裝置螢幕寬度不同於傳統web,因此我們需要改變viewport 這是真正有效的 區域。由於移動裝置螢幕寬度不同於傳統w...

移動端viewport的作用

我們知道,在css中我們一般使用px作為單位,在桌面瀏覽器中css的1個畫素往往都是對應著電腦螢幕的1個物理畫素,這可能會造成我們的乙個錯覺,那就是css中的畫素就是裝置的物理畫素。但實際情況卻並非如此,css中的畫素只是乙個抽象的單位,在不同的裝置或不同的環境中,css中的1px所代表的裝置物理畫...

移動端viewport自適應屏

1,viewport viewport,是移動端特有。這是乙個虛擬的區域,承載網頁的。在預設情況下,移動裝置上的viewport都是大於瀏覽器可視區域的,這是因為移動裝置的解析度相對於pc來說都比較小,所以為了能在移動裝置上正常顯示為pc瀏覽器設計的 移動裝置上的瀏覽器都會把自己預設的viewpor...