Viewport

yzzz 發布于2019-08-01 18:40 / 1105人閱讀

摘要：一個移動專屬的值，用于定義視口的各種行為布局視口視口的分辨率接近于顯示器視覺視口手持設備物理屏幕的可視區域完美視口它類似于布局視口，但寬度和視覺視口相同，用戶不用縮放和拖動網頁就能夠很好的進行網頁瀏覽。

一個移動專屬的Meta值，用于定義視口的各種行為

layout viewport(布局視口)

視口的分辨率接近于PC顯示器

visual viewport(視覺視口)

手持設備物理屏幕的可視區域

ideal viewport(完美視口)

它類似于布局視口，但寬度和視覺視口相同，用戶不用縮放和拖動網頁就能夠很好的進行網頁瀏覽。而完美視口也是通過viewport meta的某種設置來達到

參數設置：

width 控制Viewport的寬度,可以指定一個值或者設備的寬度,如device-width為設備的寬度(單位為設備縮放比例1:1的像素),這里設置的寬度等于設備寬度;

initial-scale 初始縮放,即頁面初始縮放程度.對應的值是一個浮點值,這里是一個乘積關系,頁面呈現大小等于設置的寬度乘以initial-scale的值;

maximum-scale 最大縮放,即允許用戶縮放的最大比例,也是乘積關系.一般設置為1:1的比例不會讓用戶縮放的;

minimum-scale 最小縮放,如上;

user-scalable 用戶是否可以手動縮放,一般值設為no,不允許用戶縮放;

讓viewport的寬度為設備寬度，在viewport中布局完成后顯示在屏幕上時不縮放，即布局是怎樣，顯示就是怎樣。這樣我們在制作網頁時只需要直接針對手機屏幕大小進行設計:

GPU云服務器云服務器 viewport viewport布局

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51942.html

【移動端web開發】（二）深入viewport

摘要：當你進行頁面放大的時候，原本在未縮放的頁面上看起來很小的尺寸，現在通過看上去變大了，事實上這部分的的值并沒有變化，僅僅是因為進行放大后，的的值所占的屏幕分辨率的值變大了。同理的的值并沒有發生變化但是值所占的屏幕分辨率的值變小了。前言通過上一篇我們已經大概明白viewport是什么，但是viewport并沒有那么簡單，一包研究得身心疲憊，腦子一個不夠用哈哈，讓我們一起看看吧！三個v...

Baoyuan 2019-08-22 16:58 評論0 收藏0
visual viewport和layout viewport

摘要：原本在未縮放的頁面上看起來很小的尺寸，現在通過看上去變大了，事實上這部分的的值并沒有變化，僅僅是因為進行放大后，的的值所占的屏幕分辨率的值變大了。同理的的值并沒有發生變化但是值所占的屏幕分辨率的值變小了。首先了解幾個概念: 物理像素：買手機的時候會有一個 n x m 的分辨率，那是屏幕的n x m個呈像的點，一個點（小方格）為一個物理像素。它是屏幕能顯示的最小粒度. CSS像素：就...

taowen 2019-08-01 15:29 評論0 收藏0
移動前端中 viewport （視口）

摘要：一的概念端實際上等于瀏覽器窗口，擁有瀏覽器窗口的寬度和高度，元素使用寬度的在未手動設置元素寬度情況下。用獲取元素本身的尺寸移動端分為和。大小由設備本身決定。所有的縮放規則都是相對于而言的，而與多寬無關。一、viewport的概念 PC端 viewport實際上等于瀏覽器窗口，擁有瀏覽器窗口的寬度和高度，元素使用viewport寬度的100%（在未手動設置html元素寬度情況下）。用d...

only_do 2019-08-30 15:52 評論0 收藏0
移動前端中 viewport （視口）

摘要：一的概念端實際上等于瀏覽器窗口，擁有瀏覽器窗口的寬度和高度，元素使用寬度的在未手動設置元素寬度情況下。用獲取元素本身的尺寸移動端分為和。大小由設備本身決定。所有的縮放規則都是相對于而言的，而與多寬無關。一、viewport的概念 PC端 viewport實際上等于瀏覽器窗口，擁有瀏覽器窗口的寬度和高度，元素使用viewport寬度的100%（在未手動設置html元素寬度情況下）。用d...

LiangJ 2019-08-01 16:12 評論0 收藏0
移動端適配之二：visual viewport、layout viewport和ideal view

摘要：對于，瀏覽器全屏狀態下，其的值為。的大小可以通過和，實際使用中可能會有一些兼容問題，這跟聲明有關。是為了能將電腦上的網頁正確的顯示到手機上。調整的大小，讓其在的查看下有最佳效果，就是我們想要的移動端適配。上一篇博文，可算把像素這個東西講清楚了。在這篇博文里面，將繼續介紹viewport相關的內容。很多博客都會提到PPK所講的三個viewport，有的講的比較復雜，看的云里霧里，我這...

darkerXi 2019-08-30 15:55 評論0 收藏0