當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

怎么把页面按比例缩小_meta viewport 是做什么用的，怎么写？

發布時間：2023/12/3 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了怎么把页面按比例缩小_meta viewport 是做什么用的，怎么写？小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前置知識（有助于viewport的理解）

李明：設備像素、設備獨立像素、CSS像素、分辨率、PPI、devicePixelRatio?zhuanlan.zhihu.com

移動端的問題

屏幕窄，一般來說設備獨立像素不超過400px。

比如把網站側邊欄寬度設置為10%，這在PC瀏覽器看起來沒問題(一般視窗大于1000px)，但在手機上就只有40px，太小了什么都放不下。

visual viewport 和 layout viewport

我們把layout viewport想象為一個很大的照片，把visual viewport想象為在一張板子上開了的矩形口子。板子在照片上移動時，透過口子(visual viewport) 可以看到照片(layout viewport)的其中部分。

layout viewport是頁面渲染時所參考的寬高
visual viewport 是移動端視窗的設備獨立像素寬高

在移動端，頁面在渲染時以layout viewport寬度作為計算標準。以iphone為例，其 layout viewport 寬度是980px，頁面元素渲染時就認為窗口為980px寬。對于如下兩個buton，在Iphone Safari上.button-1的寬度為為.button-2的1/10。渲染后在整體縮小(user-scale)頁面，讓頁面寬度正好完全填充屏幕。縮小后的.button-1的寬度為37.5px，為屏幕寬度的1/10，可讀性變差了。

.button-1 {width: 98px; } .button-2 {width: 100%; }

為解決這一問題，需要設置viewport

viewport的概念

對于頁面上一個div元素，我們給他設置width: 10%，這個10%是相對于誰？最終是多寬？

div是body的10%， body和html等寬，html和瀏覽器窗口等寬，當改變瀏覽器窗口寬度時，div的寬度也會改變，大家可以自行測試。

假設有如下頁面，沒設置viewport。對于大部分瀏覽器，會以980px寬度去渲染，然后頁面會縮小到正好被屏幕容納為止。此時頁面上元素看起來很小。如下圖所示：

部分瀏覽器可能不去做自動縮放，用戶需要左右滑動頁面才能看到所有內容，如下圖：

現在添加<meta name="viewport" content="width=device-width">，假設在IphoneX上預覽，其device-width就是其設備獨立像素，即375px。

最終效果如下，看起來好多了。

width

width屬性被用來控制layout viewport（布局視窗）的寬度,layout viewport（布局視窗）寬度默認值是設備廠家指定的。iOS, Android基本都將這個視口分辨率設置為 980px。我們可以?width=320 這樣設為確切的像素數，也可以設為device-width這一特殊值，一般為了自適應布局，普遍的做法是將width設置為device-width，width=device-width 也就是將layout viewport（布局視窗）的寬度設置為設備屏幕分辨率的寬度。網頁縮放比例為100%時，一個CSS像素就對應一個 dip（設備獨立像素），layout viewport的寬度＝屏幕分辨率的寬度＝dip 的寬度。

initial-scale

initial-scale用于指定頁面的初始縮放比例，initial-scale=1 表示將layout viewport的寬度設置為屏幕分辨率的寬度，initial-scale=1.5 表示將layout viewport的寬度設置為屏幕分辨率寬度的1.5倍。

maximum-scale

maximum-scale用于指定用戶能夠放大的最大比例，假設頁面的默認縮放值initial-scale是1，那么用戶最終能夠將頁面放大到這個初始頁面大小的3倍。

minimum-scale

類似maximum-scale的描述，不過minimum-scale是用來指定頁面縮小比例的。設置為0.5表示用戶能夠將頁面縮小到初始頁面的0.5倍，通常情況下，不會定義該屬性的值，頁面太小將難以閱讀。

總結

以上是生活随笔為你收集整理的怎么把页面按比例缩小_meta viewport 是做什么用的，怎么写？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。