开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js 视口和窗口

在JavaScript中，“视口”（Viewport）和“窗口”（Window）是两个与浏览器界面紧密相关的概念，它们各自有不同的含义和应用场景。

视口（Viewport）

视口是用户在浏览器上可见的页面区域。它决定了网页内容如何显示在用户的屏幕或窗口上。视口的大小和位置可以影响网页的布局和渲染。

基础概念：视口是浏览器窗口中用于显示网页内容的矩形区域。在移动设备上，视口还涉及到缩放和滚动等操作。
相关优势：通过理解和控制视口，开发者可以优化网页在不同设备和屏幕尺寸上的显示效果，提升用户体验。
应用场景：响应式网页设计、移动端适配、页面缩放和滚动控制等。

窗口（Window）

在JavaScript中，window对象是全局对象，代表了浏览器窗口或框架。它提供了许多属性和方法，用于操作浏览器窗口和与用户交互。

基础概念：window对象是JavaScript中的全局对象，包含了浏览器窗口的所有信息，如位置、大小、打开的文档等。
相关类型：window对象还包含了许多子对象和属性，如document（代表当前窗口中加载的文档）、navigator（提供浏览器和操作系统的信息）等。
应用场景：弹出新窗口、获取浏览器信息、控制浏览器窗口大小和位置、与用户交互（如提示框、确认框等）。

遇到的问题及解决方法

视口适配问题：在不同设备上，网页可能无法正确显示。这通常是因为视口设置不正确。可以通过在HTML文件的<head>部分添加<meta>标签来设置视口，例如：<meta name="viewport" content="width=device-width, initial-scale=1.0">。这将确保网页宽度与设备屏幕宽度相匹配，并设置初始缩放比例为1。
窗口大小调整问题：有时，网页内容可能在窗口大小调整时发生布局混乱。这可以通过CSS媒体查询和JavaScript事件监听来解决。使用CSS媒体查询可以根据窗口大小应用不同的样式规则；使用JavaScript可以监听resize事件，并在窗口大小发生变化时执行相应的操作，如重新计算布局或更新元素位置。

总之，理解和掌握视口和窗口的概念对于前端开发至关重要，它们可以帮助开发者创建更加灵活、响应式的网页应用。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【移动端网页布局】移动端网页布局基础概念 ② ( 视口 | 布局视口 | 视觉视口 | 理想视口 )

它是指网页中可见部分的大小，即浏览器窗口中显示的内容大小。在移动设备上，由于屏幕较小，需要对网页进行缩放以适应屏幕大小，因此布局视口也需要进行调整。...指的是用户看到的网页区域 , 即浏览器窗口中当前用户实际看到的页面区域 ; 设备的屏幕大小和浏览器窗口的大小决定了视觉视口的大小 ; PC 浏览器中，视觉视口通常等于浏览器窗口...为了使网页在不同设备上都能够正确地显示和布局，开发者需要考虑不同设备的视觉视口大小和缩放比例，并使用相应的技术和工具进行适配。...; 它是一种标准化的概念，与具体设备的屏幕大小和浏览器窗口大小无关。...理想视口的大小取决于网页的内容和布局，通常应该与布局视口的大小相同。通过设置理想视口，可以使网页在不同设备上具有相同的布局和显示效果，无需进行缩放和滚动。

1.3K3 0

前端开发-视口

视口概述视口简单理解就是可视区域的大小我们称之为视口在 PC 端，视口大小就是浏览器窗口可视区域的大小窗口大小, 移动端视口宽度被人为定义为了 980图片那么在移动端为什么是 980 而不是其他的值呢，因为过去网页的版心都是 980，乔老爷子为了能够让网页在移动端完美的展示, 所以将 iOS 手机视口的大小定义为了...980，后来谷歌也觉得这是一个非常牛 X 的方案, 所以 Android 手机的视口也定义为了 980。...980 带来的问题，虽然移动端自动将视口宽度设置为 980 之后让我们可以很完美的看到整个网页，但是由于移动端的物理尺寸(设备宽度)是远远小于视口宽度的，所以为了能够在较小的范围内看到视口中所有的内容..., 那么就必须将内容缩小，(和前面文章当中讲解的 Canvas 时讲解的 viewbox 一样, 近大远小原理)。

1740 0

创建布局与视口

AcDbObjectId vportId; acdbGetObjectId(vportId,entlast); ///设置视口

1571 0

获取浏览器视口大小

+ getPageScale().pageWidth + ", height: " + getPageScale().pageHeight); 3 }; 4 5 /** 6 * 获取浏览器视口大小

1.2K1 0

（译）SDL编程入门（9）视口

视口有些时候，你只想渲染屏幕的一部分，比如最小地图。使用视口你可以控制你在屏幕上的渲染位置。...//左上角视口 SDL_Rect topLeftViewport; topLeftViewport.x = 0;...在该调用之后进行的任何渲染都将在给定的视口所定义的区域内进行渲染。...这和之前差不多，只是现在x坐标是屏幕的一半。...同样，视口将使用与它所在的窗口相同的坐标系，所以图像会显得压扁，因为视口只有一半的高度。在这里[2]下载本教程的媒体和源代码。

7903 0

IntersectionObserver 是否进入了视口（viewport）

是否进入视口的使用场景还是很多的，一般第一时间想到的就是监听滚动，关键是scroll很密集，计算量很大，如果做个防抖节流性能还能优化一些，否则性能问题就很有可能发生。...刚刚进入视口（开始可见）和完全离开视口（开始不可见）会被触发，初始化不管可见不可见也会触发。...height、left、right、top、width、x、y intersectionRatio：目标元素的可见比例，跟threshold设置的有关，默认0，1 intersectionRect：目标元素与视口...因为滚动可能是窗口也可能是容器，当设置是容器的时候，窗口滚动可能需要设置用来匹配内部需求。...使用场景常用的应该是懒加载和滚动到底部加载更多，有了这个API，图片的懒加载也变得简单了，可能是出于兼容性的原因，现在懒加载和滚动到底部加载更多的库都没有使用。

9372 0

第118天：移动端开发——视口

这就是要说得视口了。在CSS标准文档中，它被称为初始包含块。这个初始包含块是所有CSS百分比宽度推算的根源。（在桌面上，视口的宽度和浏览器窗口的宽度一致）。...1、布局视口移动端设备如果使用视口的宽度和浏览器窗口宽度一样会导致很丑陋的结果。想象一下。一个针对桌面级的左右结构页面布局，左侧站浏览器窗口的20%，右侧占80%。...如上图，红色箭头之间的区域就是视觉视口的区域。它和设备的屏幕一样宽，并且它的CSS像素的数量会随着用户缩放而改变。 3、理想视口布局视口的默认宽度并不是一个理想的宽度。...介绍了三种视口布局视口：不再与移动端浏览器相关联，完全是独立的。实际上布局视口的宽度要比屏幕宽出很多。视觉视口：用户看到的网站展示区域，一般视觉视口和设备宽度一致。...理想视口：为了使网站在移动端有最理想的浏览和阅读宽度而设定。需要手动添写meta视口标签通知浏览器操作。使用它配合css媒体查询制定移动端展示方案。

9532 0

CSS 竟然能获取视口尺寸？

在这篇文章中，我们将探讨如何使用 CSS 获取视口尺寸，并展示一个简单的实现示例。 1 效果调整浏览器窗口大小，你会发现视口的宽度和高度会实时更新（旧浏览器可能不支持）。...2 实现原理定义 CSS 自定义属性（@property） --vw 和 --vh，分别表示视口的宽度和高度。使用 tan() 和 atan2() 函数计算视口的宽度和高度。...使用 counter 和 counter-reset 属性将计算结果显示在页面上。...2.1 计算视口尺寸我们可以使用 vw 和 vh 获取浏览器视口尺寸，但是这是相对单位，所以需要转换为 px 才行。...() 函数可以用来计算正切值和反正切值。

1851 0

浅谈移动端中的视口（viewport）

在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。...CSS 像素（CSS pixels）是 CSS 和 JS 中使用的一个抽象概念。它和物理像素之间的比例取决于屏幕的特性（是否为高密度）以及用户进行的缩放，由浏览器自行换算。...1.2 三种视口移动端浏览器通常宽度是 240px~640px，而大多数为 PC 端设计的网站宽度至少为 800px，如果仍以浏览器窗口作为视口的话，网站内容在手机上看起来会非常窄。...因此，引入了布局视口、视觉视口和理想视口三个概念，使得移动端中的视口与浏览器宽度不再相关联。...视觉视口和缩放比例的关系为：当前缩放值 = 理想视口宽度 / 视觉视口宽度所以，当用户放大时，视觉视口将会变小，CSS 像素将跨越更多的物理像素。

2.3K2 0

师于源码 | Flutter 区域视口双向滑动

比如 AndroidStudio 的文件树和编辑器区域，当宽度较窄时，水平方向通过拖拽底部滚动条来滚动视口。...---- 3.通过小案例提取精华由于 debugger 代码面板中涉及到其他很多东西，这里来精简一下，做个区域视口双向滑动的最小案例，来方便大家理解和使用。...如下所示，蓝色区域内有一行文字，当窗口宽度缩小到文本溢出时，底部会呈现滑动条支持水平滑动：这里先总结一下实现区域视口的双向滚动的步骤: 需要两个可滑动的视口: SingleChildScrollView...需要两个 Scrollbar 用于控制视口滑动，并且指定 ScrollController, 关联 [滑动视口] 和 [滑动条]。...下面看一下案例的代码实现：其中六处的 tag 和上面一致。tag3 和 tag4 处是准备两个可滑动视口，这里简单期间使用 SingleChildScrollView，其他滑动组件都可以。

5262 0

相对于视口的CSS自适应单位vw和vh

作者：Tom_Lo 视口单位(Viewport units) 什么是视口？...在PC端，视口指的是在PC端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（...理想视口）。...3.vmin：选取vw和vh中最小的那个。 4.vmax：选取vw和vh中最大的那个。 ...vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。

1.5K3 0

理想的viewport(视口)并不存在

在你依据少数几个严格的断点（breakpoints）来做设计决策之前，确保你已经考虑了屏幕尺寸和浏览器视口的巨大碎片化问题。...最常见的视口尺寸是什么？如果我们从收集到的数据点中筛选出前20个独特的视口尺寸，主要都是较小的尺寸。...视口是浏览器窗口的尺寸，而不是屏幕尺寸。如果你正在桌面设备上阅读这篇文章，有多少窗口占满了整个屏幕？你正在阅读的浏览器占据了多少屏幕空间？...还要考虑“桌面端”视口尺寸的极度碎片化。是的，如果你使用经典的768px、1024px和1280px断点，通过媒体查询配置布局和字体大小可能是有意义的，但中间还有大量的尺寸怎么办？...在规划页面内容时，问问自己对于那些不符合典型模式的奇怪视口尺寸，情况会是如何？始终尝试简化和压缩内容，使其对所有人都有用。

2173 0

Computer Graphics note(3):视口变换&光栅化

截屏2020-08-02 下午10.53.16.png 四.视口变换(映射([−1,1]3([-1,1]^3([−1,1]3) 截屏2020-08-02 下午10.54.00.png 五.光栅化至此，...经过了MVP和视口变换之后，三维空间的几何形体就被映射到了屏幕空间里，想要得到图像，需要用这些信息进行光栅化，将其变成像素。...上面两图都是去除高频和低频信息，但是中间的频率确实一个可选范围，所以当范围往外扩大的时候，其结果就会偏向高通滤波。...上面说过，走样是原信号和搬移信号发生混叠现象，而低通滤波(上图中的虚线矩形)去除高频信号后再采样后，就没有混叠了，即反走样。...当和MSAA结合时，就应该对每个采样点进行Z-Buffer。在具体实现的时候，同步生成成品图像信息和深度图(深度缓存)，深度图只存每个像素所表示的几何物体的最浅的深度信息。

1.1K2 1

第119天：移动端：CSS像素、屏幕像素和视口的关系

一、视口 1、layout viewport（布局视口）　　一般移动设备的浏览器都默认设置了一个viewport 元标签，定义一个虚拟的layout viewport（布局视口），用于解决早期的页面在手机上显示的问题...2、visual viewport（视觉视口）和物理像素 visual viewport（视觉视口）物理屏幕的可视区域，屏幕显示器的物理像素，同样尺寸的屏幕，像素密度大的设备，硬件像素会更多。...和 dip （设备逻辑像素） ideal viewport（理想视口）通常是我们说的屏幕分辨率。...布局宽度：布局视口的逻辑像素的数量屏幕宽度：屏幕的逻辑像素的数量（视觉视口、可见视口、虚拟视口）逻辑宽度：逻辑像素的数量视觉宽度：横向长度 chrome 实验结论：桌面浏览器设置viewport...=1，不设置width 那么Android width=980px，IOS width=device-width 五、视口与JS screen.width 屏幕的逻辑像素的数量 window.innerWidth

1.7K5 0

css视口单位vw,vh的妙用(embed篇)

在电脑端css加入下面的东东 max-height:100vh;/*限制视频高度最大不能超过浏览器窗口高度*/ max-width:calc(16 * 100vh/ 9);/*限制视频宽度最大不能超过浏览器窗口高度的

1.1K3 0

响应式网页设计：使用媒体查询、视口单元和流体布局的技术

随着智能手机、平板电脑和台式显示器等设备的不断增加，创建能够为用户提供最佳观看体验（无论其使用何种设备）的网站至关重要。本文将探讨实现响应式网页设计的基本技术，重点关注媒体查询、视口单元和流畅布局。...视口单位视口单位是相对单位，可以轻松创建可扩展的设计。它们包括 vw（视口宽度）和 vh（视口高度），它们是视口尺寸的百分比。这些单位对于设置适应视口大小的尺寸和间距特别有用。...} 在此示例中，容器跨越视口的整个宽度，确保它适应不同的屏幕尺寸。...3rem 之间缩放，具体取决于视口宽度，确保其在所有设备上保持可读。...组合技术结合媒体查询、视口单元和流体布局，您可以创建高度响应且灵活的网页设计。

2021 0

网口调试步骤_万兆光口和千兆光口对接

千兆网口、光口调试总结配置 6096端：工作模式的配置方式： 1、硬件配置，通过电阻上下拉确定；6096的硬件配置不可以错，其在port status寄存器状态中有相应的寄存器位体现硬件配置的工作模式...下图是MAC和PHY连接的图，通常MAC集成在ARM核内，PHY是集成在switch中的。下面这张图是SGMII的连接方式和这里的RGMII方式还有区别。...接收类似，MAC和PHY侧都有接收和发送这样的概念存在。时序调节，就是调节这里的上下沿和数据的关系，只有正确的数据配合适当时序，传输时校验和才会正确。...光模块分为，多模；对于多模注意收发的波长要对应，一般光模块上有蓝色和黄色，收发使用两种不同的颜色，即蓝色配黄色才行。多模光纤使用一根光纤线，光纤线上的光波长为1.31um和1.55um居多。...修改相关Makefile和配置脚本，编译。另外：如果光口热插拔出问题，即光模块在上电完成后拔下再插上出现网络不通，此时端口设置成自协商模式，可以解决此问题。

3.2K2 0

试试动态视口单位之 dvh、svh、lvh

正常而言： 1vw 等于1/100的视口宽度（Viewport Width） 1vh 等于1/100的视口高度（Viewport Height） vmin — vmin 的值是当前 vw 和 vh...翻译一下：大视口（Large Viewport）：视口大小假设任何动态扩展和缩回的 UA 界面都没有展开小视口（Small Viewport）：视口大小假设任何动态扩展和缩回的 UA 界面都展开了...简单而言，动态视口的意思是：动态工具栏展开时，动态视口等于小视口的大小当动态工具栏被缩回时，动态视口等于大视口的大小因此，也就能得到下面这张图：其中，dvh、dvw、dvmax、dvmin 对标...这与 vi 水平书写方向相反，这将对应于视口高度，而在垂直文档中，这将表示视口的宽度。因此，vi 和 vb 属于两个逻辑单位。...总结一下简单再总结一下，本文通过 vh 在移动存在的问题入手，引出了规范新增的三大类新的和视口相关的单位。

2K2 0

CSS position:fixed 定位基准元素为视口问题解决

top，right，bottom 和 left 属性则决定了该元素的位置。...他们默认的祖先元素都是视口，absolute 大家应改很熟悉，给它的父元素增加 position: relative 就可以基于父元素进行定位了，它是相对于最近的非 static 定位祖先元素的偏移，来确定元素位置...fixed 通常用于导航栏的顶部固定，场景大多是基于视口定位的。...今天看了一下 MDN ，原来 position: fixed 也可以设置它的祖先元素： fixed 元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置...当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先。

2291 0

CSS position:fixed 定位基准元素为视口问题解决

top，right，bottom 和 left 属性则决定了该元素的位置。...他们默认的祖先元素都是视口，absolute 大家应改很熟悉，给它的父元素增加 position: relative 就可以基于父元素进行定位了，它是相对于最近的非 static 定位祖先元素的偏移，来确定元素位置...fixed 通常用于导航栏的顶部固定，场景大多是基于视口定位的。...今天看了一下 MDN ，原来 position: fixed 也可以设置它的祖先元素： fixed 元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置...当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先。

2401 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭