视口viewport的具体代码是?,什么是移动端视口
:
目录
1.基本概念1.1两种像素1.2三种视口2。视口3的设置。一折、二折、三折图像在PC端。视口是指浏览器的可视区域，其宽度与浏览器窗口的宽度一致。在CSS标准文档中，viewport也称为初始包含块，它是所有CSS百分比宽度估计的根，并将CSS布局限制为最大宽度。
移动终端更复杂，涉及三个视口：布局视口、视觉视口、理想视口。
本文主要讨论移动终端中的视口。
1. 基本概念
1.1 两种像素
像素是计算机屏幕上显示特定颜色的最小区域。屏幕中的像素越多，在相同的范围内你能看到的就越多。或者说，在设备尺寸相同的情况下，像素越密集，画面越精细。
那么，当我们在CSS中为一个元素设置属性width:250 px；什么时候，发生了什么？这个元素的宽度是多少像素？
事实上，这里涉及到两种不同的像素：物理像素和CSS像素。
物理像素(设备像素)
指设备屏幕的物理像素。任何设备的物理像素数都是固定的。
CSS像素(CSS像素)
是CSS和JS中使用的抽象概念。而且它和物理像素的比例取决于屏幕的特性(是否高密度)和用户的缩放比例，由浏览器自己换算。
在苹果的视网膜屏幕中，每四个像素为一组，在普通屏幕的一个像素显示区域内渲染图像，从而达到更精细的显示效果。此时，250px元素跨越500个物理像素的宽度。
如果用户放大，一个CSS像素将跨越更多的物理像素。
1.2 三种视口
手机浏览器通常是240px~640px宽，而大多数为PC设计的网站至少是800px宽。如果仍然使用浏览器窗口作为视口，网站内容在手机上看起来会很窄。
因此引入了布局视口、视觉视口、理想视口三个概念，使得移动终端中的视口不再与浏览器宽度相关联。
布局视口（layout viewport）
一般移动设备的浏览器默认设置一个viewport meta标签，定义一个虚拟布局viewport，用来解决手机上早期页面显示的问题。IOS和Android基本都是将视口分辨率设置为980px，所以PC上的网页基本都可以在手机上呈现，只是元素看起来很小。通常，默认情况下，可以手动缩放网页。
布局视口的宽度/高度可以通过document.documentelement.clientwidth/height.获得
如您所见，默认布局视口宽度为980像素。如果要显式设置布局视口，可以使用HTML中的meta标记：
meta name= viewport content= width=400
布局视口使视口完全独立于手机浏览器的屏幕宽度。CSS的布局会根据它来计算，并受它约束。
视觉视口（visual viewport）
视口是用户当前看到的区域，用户可以在不影响布局视口的情况下放大和缩小视口。
视口与缩放比例的关系为：当前缩放值=理想视口宽度/可视视口宽度。
因此，当用户放大时，可视视口将变小，CSS像素将跨越更多的物理像素。
理想视口（ideal viewport）
布局视口的默认宽度并不是一个理想的宽度，所以苹果和其他浏览器厂商推出了理想视口的概念，这是设备最理想的布局视口大小。理想视区中显示的网站具有理想的宽度，因此用户不需要缩放。
理想视口的值实际上是屏幕分辨率的值，其对应的像素称为设备无关像素，dip)。Dip与设备的物理像素无关。dip在设备屏幕上占据的空间与任何像素/英寸相同。如果用户不缩放，那么CSS像素就等于dip。
以下方法可以使布局视口的宽度与理想视口一致：
meta= viewport content= width=device-width 其实这是响应式布局的基础。
2. 视口的设置
我们可以使用视口元标记来设置布局视口。
meta name= viewport content= width=device-width，initial-scale=1.0，maximum-scale=1 以下是每个属性的详细描述：
属性值描述宽度正整数或device-width定义视口宽度，单位为像素高度正整数或device-height定义视口高度，单位为像素。通常，初始缩放值minimum-scale [0.0-10.0]不用于定义最大缩放，但它必须小于或等于最大缩放设置maximum-scale [0.0-10.0]以定义最小缩放，并且它必须大于或等于最小缩放设置用户可缩放是/否以定义是否
有几点值得注意：
视区标签仅对移动浏览器有效，对PC浏览器无效。当缩放比例为100%时，dip宽度=CSS像素宽度=理想视口宽度=布局视口宽度。单独设置初始比例或宽度会导致兼容性问题。因此，将布局视口设置为理想视口的最佳方法是同时设置这两个属性。即使设置了user-scalable=no，也可以在Android Chrome浏览器中强制启用手动缩放。
3. 一倍图、二倍图、三倍图
MacBook Pro视网膜显示屏硬件像素为2880px * 1800px。当屏幕分辨率设置为1920px 1200px时，理想视口的宽度为1920px，因此dip的宽度为1920px。它与理想视口宽度的比值为1.5(2880/1920)，称为设备像素比：逻辑像素宽度*设备像素比=物理像素宽度。
设备像素比率可以通过window.devicePixelRatio或使用CSS中的device-pixel-ratio获得。
以下是常见的设备像素比率：
普通桌面显示器：devicePixelRatio=1高密度桌面显示器(Mac Retina):devicepixelrratio=2主流手机显示器：devicepixelrratio=2或3对于一张100px * 100px的图片，通过CSS设置其宽度和高度：
{宽度：100px高度：100px}在普通显示屏的电脑中打开很正常，但是假设在手机或者视网膜屏幕中打开，按照逻辑分辨率渲染，他们的devicePixelRatio=2，那么就相当于用4个物理像素来刻画1个电子像素。这相当于用2x的放大镜看一张图片，图片会变得模糊。
这时候就需要使用@2x甚至@3x的图形，避免画面失真。
关于移动视口的具体使用，本文就讲到这里。有关移动视窗的更多信息，请搜索以前的文章或继续浏览以下相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。