关于viewports以前一直都是知道个大概但是一直没有详细去了解，加上最近在项目中遇到了比较近点的1像素问题，就乘着这个机会再加深一下印象回顾一下基础。
screenwidth/height
含义：用户的屏幕的完整大小。
度量：设备的pixels。
意思就是用户屏幕的物理宽度，它们的值不会随着用户的缩放而改变：它们是显示器的特征，而不是浏览器的特征。换句话说是屏幕出厂的时候就决定了的
windowinnerWidth/Height
含义：包含滚动条尺寸的浏览器完整尺寸
度量：CSS的pixels
documentdocumentElementclientWidth/Height
含义：viewport尺寸：浏览器窗口尺寸。
度量：CSS的pixels
随浏览器大小变化而变化，但宽度不包含滚动条宽度。具体请看图一比较两者的差别。
viewport的功能在于控制你网站的最高块状（block）容器：<html>元素。怎么理解这句话呢？
假设定义了一个可变尺寸的布局（liquid layout），且你定义一个侧边栏的宽度为width: 10%。当你改变浏览器窗口大小时，该侧边栏会自动扩张和收缩。这是什么原理呢？
技术上讲，原理是侧边栏的宽度为它父元素宽度的10%，我们设它的父元素是body，且你未指定宽度。那么问题就变为了<body>的宽度到底是多少？
通常，一个块级元素占有起父元素的100%的宽度（这里有异常情况，暂时忽略）。所以<body>的宽度就是其父元素<html>的宽度。
那么<html>元素到底有多宽？
<html>的宽度受viewport所限制，<html>元素为viewport宽度的100%。,因为它的宽度恰好为浏览器的宽度。所以你的侧边栏宽度width: 10%会占用10%的浏览器宽度。
反过来，viewport是严格的等于浏览器的窗口：定义就是如此。viewport不是一个HTML的概念，所以你不能通过CSS修改它。它就是等于浏览器窗口的宽度高度 –—— 在桌面浏览器上如此，移动设备浏览器上有点复杂。
注意：当我们设置html上面手动的设置了宽度，在那种情况下document documentElement clientWidth/Height依然给出了viewport的尺寸，而不是<html>元素。
比如 我手动设置html的样式为
html {width：2000px;height: 2000px;}
通过document documentElement clientWidth/Height 获取到的值只会是viewport的大小，而不是html元素的大小 2000px;
所以document documentElement clientWidth/Height只会给出viewport的尺寸，而不管<html>元素尺寸如何改变。
document documentElement offsetWidth/Height
含义：<html>的尺寸
度量：CSS的pixels
如果clientWidth/Height一直用以标示viewport的尺寸，我们该如何去获取<html>元素的尺寸呢？通过documentdoucmentElementoffsetWidth/Height来获取html的宽度。
像上面的那个例子，这个就会返回2000px;
含义：页面的移位
度量：CSS的pixels
windowpageXOffset 和 windowpageYOffset，定义了页面(document)的相对于窗口原点的水平、垂直位移。因此你能够定位用户滚动了多少的滚动条距离
对应viewport我们现在普遍理解为两种视图:
1visualviewport：windowinnerWidth/Height定义 包含滚动条
2 layoutviewport: documentdocumentElementclientWidth/Height 不包含滚动条
在理解这两种viewport之前，我们先认识理解这几个名词的意思：首先我们要记住： 1 px 就一个像素点
iphone 默认viewport 是980
vw：是Viewport's width的简写,1vw等于windowinnerWidth的1%
vh：和vw类似，是Viewport's height的简写，1vh等于windowinnerHeihgt的1%
vmin：vmin的值是当前vw和vh中较小的值
vmax：vmax的值是当前vw和vh中较大的值
1 像素密度 ：每英寸可以显示的像素点的数量，像素密度越大，表示在同样的尺寸里面，像素点越多
比如：iphone 3 的屏幕像素是320x480,iphone4s的屏幕像素是640x960，刚好两倍，然而两款手机都是35英寸的。
1英寸是一个固定长度，等于254cm。 像素密度越高，代表屏幕显示效果越精细。 Retina屏比普通屏清晰很多，就是因为它的像素密度高。
2像素： 可以分为物理像素和CSS像素
物理像素（device independent pixels ）： 物理像素也叫设备像素，任何设备的物理像素是固定不变的。比如我的笔记本的分辨率是1366 765，表示的就是宽度上最多容纳1366个物理像素点，高度上最多容纳765个物理像素点
CSS像素（CSS pixels ）：CSS像素也叫逻辑像素，是为web开发创造的。通常情况下，在桌面端，CSS像素的大小和设备像素的大小是相等的，即一个CSS像素完全覆盖了一个设备像素。如下图
但是在手机端，我们都知道网页可以通过手指进行缩放，这时候CSS像素也会改变
缩小 *** 作 ：当用户进行缩小 *** 作时，一个物理像素覆盖了多个CSS像素。图中深蓝色表示物理像素，半透明的浅蓝色表示CSS像素
当用户进行放大 *** 作时，一个CSS像素覆盖了多个物理像素 ： 这里的一个css像素就不在等于一个物理像素了。当缩小两倍的时候，两个css像素相当于一个物理像素。
DPR
DPR（devicePixelRatio）指的是设备像素比，即网页在不进行缩放使，设备像素和CSS像素的比值
DPR = 设备像素 / CSS像素(某一方向上)
从iphone4开始，苹果公司推出了retina视网膜屏幕，这种技术在屏幕大小不变的情况下，屏幕像素密度提高了一倍，分辨率自然也提高了一倍，于是DPR等于2
通过JS的screenwidth和screenheight属性，可以获取屏幕的CSS像素
通过JS的windowdevicePixelRatio属性，可以获取屏幕的DPR值
以iphoneX为例，css像素（设备独立像素）为375px 812px，DPR是3，可以计算出设备像素（物理像素）是1125px 2436px
屏幕分辨率
屏幕分辨率就是设备像素，一般以纵向像素 横向像素来表示分辨率。比如iphoneX的设备像素是1125px 2436px，分辨率也就是1125px 2436px
在不同的屏幕上，CSS像素所呈现的物理尺寸是一致的，而不同的是CSS像素所对应的物理像素具数是不一致的。在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素（某一方向上相当于1个css像素对应2个物理像素。）。
比如：
在普通屏中 我设置一个div的样式 width：100px ( 100px=100个物理像素。) ，当我将这个样式放在了Retina的屏幕（dpr=2）上的时候，发现变的更加清晰了。这是我们由于两个屏幕的像素密度不一样的结果，后者的像素密度是前者的两倍，所以在100px的css像素中的距离里面就存在了200个物理像素。但是两个展现的效果是一样的（CSS像素所呈现的物理尺寸是一致的。）,只是里面的像素点的数量不同。
同时：visualviewport还是显示100px 但是对于layoutviewport来说就相当于200px。 因为layoutviewport表示的是物理像素。
但是对于来说：
在普通屏幕下，1个位图像素对应着1个物理像素，可以完美的显示。可是在retina屏幕下，1个位图像素对应着4个物理像素，由于位图像素不可以再分割，所以就会只能就进取色，导致模糊。
如何来处理这个问题呢。比如一个200 x 300的，如果想在retina屏幕上清晰显示的话，就要提供一个400 x 600的2倍（@2x），这样的话，1个位图像素就会对应上retina屏上的1个物理像素。就不会模糊啦。
说明：retina屏是一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个。
在高清显示屏中的位图被放大，会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍。那么，前端的应对方案是：设计稿切出来的长宽保证为偶数，并使用backgroud-size把缩小为原来的1/2
//例如宽高为：200px200px，那么写法如下
css{width:100px;height:100px;background-size:100px 100px;}
//其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px
css{font-size:20px}
initial-scale这个缩放初始值是相对于设备的idea viewport的值进行缩放的，也就是说
<meta name="viewport" content="initial-scale=1">
//等效于
<meta name="viewport" content="width=devive-width"
//两者各有一个bug，所以生产时最好将两个一起写上
但如果同时出现width和initial-scale
<meta name="viewport" content="width=500, initial-scale=1">
并不是根据先后顺序比较，而是通过谁大取谁，比如设备是iphone5，idea viewport是320px，则此时initial-scale=1(320px)，所以此时viewport取width=500
关于initial-scale缩放的默认值以及其理论
visual viewport宽度 = idea viewport宽度 / 当前设置的缩放值
当前缩放值 = idea viewport宽度 / visual viewport宽度
注：这个理论不适合安卓原生浏览器
参考文章：
再聊移动端页面的适配： >
屏幕的分辨率都是像素单位。
17的屏幕一般是1440900
19的屏幕一般是1920960
网页的设计单位可以用像素也可以用百分比。
像素选取一般在1000像素或者1200像素 找个有自己决定。两边都有背景色。百分比的好处是可以随着屏幕的大小自动适应。
width#shortcut-2014 #ttbar-navs dd {
right: 0;
width: 100%; -》根据屏幕宽度设置宽度
padding: 20px 0 16px;
_right: -1px;
}
这样就可以了
屏幕分辨率是1366768，那么写宽和高要多少px才是一个屏幕！
width，宽约665px就行了，因为滚动条大约占14像素左右，height，高320px左右就行了
我家的屏幕分辨率是1366768的 能玩lol吗？可以
vivonex屏幕分辨率是多少感谢对公司产品的支持，6月12号上海将举办NEX的重磅发布会，可以留意一下的。
macbookair屏幕分辨率是多少1440900的分辨率已经足够勒，看上去还是很清晰的，至于和Retina相比较，那肯定还是是有差异的，另外，无论是Touch还是iPad,都是，使用的时候距离眼睛的距离和使用笔记本的时候距离眼睛的距离差异是很大的，所以，你并不能有很大的差异感，MBA属于入门机型，性价比超级高，新款的760，硬盘读写已经达到800MB是普通硬盘的大概9倍，另外正常使用时间在12-14个小时左右，难以抗拒的优势
iwatch屏幕分辨率是多少苹果手表iwatch有2个型号：
38mm版本的是：272340像素
42mm版本的是：312390像素
都是蓝宝石水晶镜面。
希望能帮到你，望采纳！
iphone的屏幕分辨率是多少？
480320的，35寸
Macbook Pro屏幕分辨率是多少MacBook Pro 13: 2560x1600
MacBook Pro 15: 2880x1800
还有一款MD101，是几年前的产品一直没有更新，是在售的唯一一款非retina屏mbp，分辨率1200x800。
MacBook pro的分辨率：13英寸的MacBook Pro的分辨率为：2560 x 1600 (227 ppi) 15英寸的MacBook Pro的分辨率为：2880 x 1800 (220 ppi)。
延展回答：
1MacBook Pro是苹果公司于2006年1月11日由史蒂夫·乔布斯在MacWorld 2006大会上发布的笔记本，用来取代PowerBook G4产品线。MacBook Pro与新iMac（酷睿）同为第一款转换为英特尔核心的产品。
2苹果在2006年10月24日发布了使用Intel Core 2 Duo处理器的MacBook Pro笔记本电脑。2009年6月8日发布了外形全新设计的“Unibody”MacBook Pro笔记本电脑。2012年WWDC上，苹果全球营销高级副总裁菲尔·席勒发布了配备Retina显示器并重新设计的第三代MacBook Pro。
3它的分辨率高达2880x1800，220ppi。厚度仅18mm。并在此后取消17英寸产品线。2013年尾，Apple更新了Macbook Pro系列，仅余下一款Macbook Pro 13"没有配备Retina显示器，但它是唯一可自行更换RAM和硬盘的型号。
42016年10月28日，加入Touch Bar的新款MacBook Pro发布，售价13888元起。[1]2017年6月5日，苹果开发者大会2017（WWDC 2017）在加州圣何塞的McEnery会议中心举行，大会发布了MacBook的硬件更新。
PSP的屏幕分辨率是多少480 272，不咋地啊
Macbook Air屏幕分辨率是多少你好
参数如下
116英寸 1366x768
133寸 1449900
供参考，望采纳
以上就是关于前端基础：viewports理解、页面各种宽度理解全部的内容，包括:前端基础：viewports理解、页面各种宽度理解、html+css不同分辨率的屏幕显示的像素大小不一样，如何解决、HTML中，屏幕分辨率的计量单位是什么你的网页设计按哪种分辨率作为基准等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）