viewport 的基本原理以及詳細使用方法

  發布時間:2019-10-05 13:50:27   作者:King   我要評論
這篇文章主要介紹了viewport 的基本原理以及詳細使用方法,需要的朋友可以參考下

一.viewport的概要

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

常規使用,頁面可以縮放就用下面的代碼

<meta name="viewport" content="width=device-width, initial-scale=1" />

如果不想頁面縮放就用下面的代碼

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

二.css中的像素和設備像素的區別

在桌面網頁開發時,css中的1px就是設備上的1px;然而css中的1px僅僅是一個抽象的值,不代表實際像素為多少;而在移動設備中,不同設備的像素密度是不一樣的,css中的1px可能并不等于真實設備的一個像素值。用戶縮放也會改變css中的1px代表多少設備像素。這個比例就是devicePixelRatio

物理像素/獨立像素 = devicePixelRatio
我們可以在瀏覽器中進行縮放,在控制臺中打印window.devicePixelRatio來查看devicePixelRatio的大小。其中的獨立像素可以理解為css中的px。

三.視口基礎

代碼:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

以下為viewport的幾個屬性,這些屬性可以混合來使用,多個屬性同時使用要用逗號隔開。這里我們展開一個概念,叫做ideal viewport,指的是理想情況下的viewport,不需要用戶縮放和橫向滾動條就能正常查看網頁的所有內容,并且能夠看清所有文字,無論這個文字在css中定義為多小,顯示出來時可以看清的。

屬性 描述
width 控制視口的寬度,可以指定數字;或設置device-width來指定
height 控制視口的高度,這個屬性不太重要,很少使用
initial-scale 控制頁面最初加載時的在在idealviewport下縮放等級,通常設為1,可以是小數
maximum-scale 允許用戶的最大縮放值,為一個數字,可以帶小數
minimum-scale 允許用戶的最小縮放值,為一個數字,可以帶小數
user-scalable 是否允許用戶進行縮放,值為”no”或”yes”, no 代表不允許,yes代表允許

四.viewport進階

1.width和initial-scale
當設置了width和initial-scale時,瀏覽器會自動選擇數值最大的進行適配。如設置:

<meta name="viewport" content="width=400, initial-scale=1">

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

事實上,width=device-width和initial-scale=1都代表應用ideal viewport,但在ipad、iphone等移動設備和IE上,橫豎屏不分,默認都取豎屏的寬度,兼容性最好的寫法就是

 <meta name="viewport" content="width=device-width, initial-scale=1">

2.動態改變屬性

a. document.write()

document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')

b.setAttribute

var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');

viewport概念

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

css中的像素和設備像素的區別

在桌面網頁開發時,css中的1px就是設備上的1px;然而css中的1px僅僅是一個抽象的值,不代表實際像素為多少;而在移動設備中,不同設備的像素密度是不一樣的,css中的1px可能并不等于真實設備的一個像素值。用戶縮放也會改變css中的1px代表多少設備像素。這個比例就是devicePixelRatio

物理像素/獨立像素 = devicePixelRatio

我們可以在瀏覽器中進行縮放,在控制臺中打印window.devicePixelRatio來查看devicePixelRatio的大小。其中的獨立像素可以理解為css中的px。

視口基礎
一個典型的針對移動端優化的站點包含類似下面的內容:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 

以下為viewport的幾個屬性,這些屬性可以混合來使用,多個屬性同時使用要用逗號隔開。這里我們展開一個概念,叫做ideal viewport,指的是理想情況下的viewport,不需要用戶縮放和橫向滾動條就能正常查看網頁的所有內容,并且能夠看清所有文字,無論這個文字在css中定義為多小,顯示出來時可以看清的。

屬性 描述
width 控制視口的寬度,可以指定數字;或設置device-width來指定
height 控制視口的高度,這個屬性不太重要,很少使用
initial-scale 控制頁面最初加載時的在在idealviewport下縮放等級,通常設為1,可以是小數
maximum-scale 允許用戶的最大縮放值,為一個數字,可以帶小數
minimum-scale 允許用戶的最小縮放值,為一個數字,可以帶小數
user-scalable 是否允許用戶進行縮放,值為”no”或”yes”, no 代表不允許,yes代表允許

viewport進階

1.width和initial-scale
當設置了width和initial-scale時,瀏覽器會自動選擇數值最大的進行適配。如設置:

<meta name="viewport" content="width=400, initial-scale=1">

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

事實上,width=device-width和initial-scale=1都代表應用ideal viewport,但在ipad、iphone等移動設備和IE上,橫豎屏不分,默認都取豎屏的寬度,兼容性最好的寫法就是

<meta name="viewport" content="width=device-width, initial-scale=1">

2.動態改變屬性

a. document.write()

document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')

b.setAttribute

var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');

好了,這篇文章就介紹到這了大家可以根據自己測需要要選擇。一般來說pc與移動不帶自適應的就可以用不支持縮放的,如果跳轉到移動端的可以縮放也沒有影響。

相關文章

最新評論

码报108