移動端適配之視覺視窗view port的詳細設定

2021-09-22 10:00:05 字數 880 閱讀 4882

就是百分比布局,非固定畫素,內容向兩側填充,理解成流動的布局。

viewport,是移動端特有。這是乙個用於承載網頁的虛擬的區域,。

承載關係:瀏覽器---->viewport---->網頁

適配要求:

1. 網頁寬度必須和瀏覽器保持一致

2. 預設顯示的縮放比例和pc端保持(縮放比例1.0)

3. 不允許使用者自行縮放網頁

滿足這些要求達到了適配,國際上通用的適配方案,標準的移動端適配方案。

適配設定:

如果任何設定都沒有,預設走的就是viewport的預設設定

去設定新的viewport設定,達到適配要求。

設定視口的標籤 在head裡面並且應該緊接著編碼設定

viewport的功能:

width 可以設定寬度 (device-width 當前裝置的寬度)

2. height 可以設定高度

3. initial-scale 可以設定預設的縮放比例

4. user-scalable 可以設定是否允許使用者自行縮放

5. maximum-scale 可以設定最大縮放比例

6. minimum-scale 可以設定最小縮放比例

在 content="" 使用以上引數

1. width=device-width 寬度一致比例是1.0

2. initial-scale=1.0 寬度一致比例是1.0

3. user-scalable=no 不允許使用者自行縮放 (yes,no 1,0)

標準適配方案:

meta:vp + tab 快捷方式

移動端各終端的適配問題研究 關於viewport

視窗尺寸 視窗尺寸是瀏覽器視窗的整體大小 包括滾動條 是通過css畫素度量的,可以通過window.innerwidth window.innerheight獲得。它告訴開發人員有多少空間可以用來做css布局。當使用者放大的時候,這個值會減小。所以如果使用者進行放大操作,在視窗中能獲取的空間將會變小...

移動端各終端的適配問題研究 關於viewport

test 給div設定乙個的樣式如上,當只設定寬高時,在普通的瀏覽器上顯示的div寬高和設定的寬高時相同的,即css畫素等於裝置畫素。當為div設定zoom放大後,div的css畫素不變,但是div佔據的裝置寬高為200 200。所以,當對元素或者頁面進行縮放時,裝置畫素和css畫素是不同的。在縮放...

移動端適配之rem

現在手機業務的逐漸發展,移動端的業務原來越多,但是我們的手機品牌有很多,同乙個牌子又有很多不同的型號,比如iphone就有從iphone iphonex多種型號,每種不同型號的手機螢幕大小也不盡相同,很多時候要做適配。總結一下目前個人用的幾種適配方式 1.js less 首先在頁面的頭部加上這麼一段...