怎么把页面按比例缩小_meta viewport 是做什么用的，怎么写？
前置知識（有助于viewport的理解）
李明：設(shè)備像素、設(shè)備獨(dú)立像素、CSS像素、分辨率、PPI、devicePixelRatio?zhuanlan.zhihu.com移動端的問題
屏幕窄，一般來說設(shè)備獨(dú)立像素不超過400px。
比如把網(wǎng)站側(cè)邊欄寬度設(shè)置為10%，這在PC瀏覽器看起來沒問題(一般視窗大于1000px)，但在手機(jī)上就只有40px，太小了什么都放不下。
visual viewport 和 layout viewport
我們把layout viewport想象為一個很大的照片，把visual viewport想象為在一張板子上開了的矩形口子。板子在照片上移動時，透過口子(visual viewport) 可以看到照片(layout viewport)的其中部分。
- layout viewport是頁面渲染時所參考的寬高
- visual viewport 是移動端視窗的設(shè)備獨(dú)立像素寬高
在移動端，頁面在渲染時以layout viewport寬度作為計算標(biāo)準(zhǔn)。以iphone為例，其 layout viewport 寬度是980px，頁面元素渲染時就認(rèn)為窗口為980px寬。對于如下兩個buton，在Iphone Safari上.button-1的寬度為為.button-2的1/10。渲染后在整體縮小(user-scale)頁面，讓頁面寬度正好完全填充屏幕?？s小后的.button-1的寬度為37.5px，為屏幕寬度的1/10，可讀性變差了。
.button-1 {width: 98px; } .button-2 {width: 100%; }為解決這一問題，需要設(shè)置viewport
viewport的概念
對于頁面上一個div元素，我們給他設(shè)置width: 10%，這個10%是相對于誰？最終是多寬？
<html><body><div style="width:10%">測試寬度</div></body> </html>div是body的10%， body和html等寬，html和瀏覽器窗口等寬，當(dāng)改變?yōu)g覽器窗口寬度時，div的寬度也會改變，大家可以自行測試。
假設(shè)有如下頁面，沒設(shè)置viewport。對于大部分瀏覽器，會以980px寬度去渲染，然后頁面會縮小到正好被屏幕容納為止。此時頁面上元素看起來很小。如下圖所示：
部分瀏覽器可能不去做自動縮放，用戶需要左右滑動頁面才能看到所有內(nèi)容，如下圖：
現(xiàn)在添加<meta name="viewport" content="width=device-width">，假設(shè)在IphoneX上預(yù)覽，其device-width就是其設(shè)備獨(dú)立像素，即375px。
最終效果如下，看起來好多了。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3, minimum-scale=0.5">width
width屬性被用來控制layout viewport（布局視窗）的寬度,layout viewport（布局視窗）寬度默認(rèn)值是設(shè)備廠家指定的。iOS, Android基本都將這個視口分辨率設(shè)置為 980px。我們可以?width=320 這樣設(shè)為確切的像素數(shù)，也可以設(shè)為device-width這一特殊值，一般為了自適應(yīng)布局，普遍的做法是將width設(shè)置為device-width，width=device-width 也就是將layout viewport（布局視窗）的寬度設(shè)置為設(shè)備屏幕分辨率的寬度。網(wǎng)頁縮放比例為100%時，一個CSS像素就對應(yīng)一個 dip（設(shè)備獨(dú)立像素），layout viewport的寬度＝屏幕分辨率的寬度＝dip 的寬度。
initial-scale
initial-scale用于指定頁面的初始縮放比例，initial-scale=1 表示將layout viewport的寬度設(shè)置為屏幕分辨率的寬度，initial-scale=1.5 表示將layout viewport的寬度設(shè)置為屏幕分辨率寬度的1.5倍。
maximum-scale
maximum-scale用于指定用戶能夠放大的最大比例，假設(shè)頁面的默認(rèn)縮放值initial-scale是1，那么用戶最終能夠?qū)㈨撁娣糯蟮竭@個初始頁面大小的3倍。
minimum-scale
類似maximum-scale的描述，不過minimum-scale是用來指定頁面縮小比例的。設(shè)置為0.5表示用戶能夠?qū)㈨撁婵s小到初始頁面的0.5倍，通常情況下，不會定義該屬性的值，頁面太小將難以閱讀。
總結(jié)
以上是生活随笔為你收集整理的怎么把页面按比例缩小_meta viewport 是做什么用的，怎么写？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 华为手机如何更改微信图标
- 下一篇： tensorflow图形检测_社交距离检