視口viewport

時間 2019-11-30

標籤 viewport 欄目 HTML5 简体版

原文原文鏈接

視口：移動端特有，有默認寬度980px，且有縮放功能，用來承載網頁，瀏覽器承載視口，這個區域是虛擬的瀏覽器

　　pc：瀏覽器窗口 - 網頁scala

　　移動：瀏覽器窗口 - 視口 - 網頁it

問題：當設備寬度 < 網頁寬度時（視口承載網頁有默認狂賭默認縮放功能）致使網頁內的內容縮放meta

解決：移動端適配

　　作移動端適配：（標準移動端頁面）im

　　　　1. 視口的寬度要和設備一致，網頁100%，網頁寬度和視口寬度一致移動端頁面

　　　　2. 默認視口縮放比例和PC（網頁預覽效果）比例一致1.0viewport

　　　　3. 不容許用戶縮放頁面移動

　　視口設置完成以上需求：view

　　　　在<head>標籤中添加<meta>

　　　　<meta name="viewport">：聲明視口

　　　　content=""：設置屬性

　　　　width：視口寬度

　　　　height：視口高度

　　　　initial-scale：視口默認縮放比例

　　　　user-scalable：是否容許用戶自行縮放

　　　　maximum-scale=1.0：最大縮放比例（可默認不寫）

　　　　minimum-scale=1.0：最小縮放比例

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。