草庐IT

viewport-vw

全部标签

html - 为什么即使我在 Chrome 调试工具中更改视口(viewport),网站的宽度仍然相同?

我正在使用Chrome调试工具的视口(viewport)模拟器。我觉得奇怪的是,无论视口(viewport)宽度如何,Chrome始终报告相同的像素宽度,并且缩放和DeviceToPixelRation(DPR)都没有变化。h1的样式将width设置为100%并且没有其他代码。我希望当视口(viewport)宽度改变时,宽度或DPR都会改变。为什么没有发生?代码如下:Title*{margin:0;padding:0;}h1{width:100%;background:blue}Someheadertexthere 最佳答案 这是来

html - 有两个视口(viewport)元标记 - 一个会被覆盖吗?

我想将以下属性添加到我的代码库中:但是我的项目使用了一些集中式代码,其中包括页面后面的以下内容:谁能告诉我这些标签是否会相互冲突或相互覆盖? 最佳答案 我认为meta标记的处理方式与title标记相同。如果您使用多个,它们会被后面的覆盖。我不建议使用多个元视口(viewport),页面不会被W3C验证器验证。 关于html-有两个视口(viewport)元标记-一个会被覆盖吗?,我们在StackOverflow上找到一个类似的问题: https://stack

html - 有两个视口(viewport)元标记 - 一个会被覆盖吗?

我想将以下属性添加到我的代码库中:但是我的项目使用了一些集中式代码,其中包括页面后面的以下内容:谁能告诉我这些标签是否会相互冲突或相互覆盖? 最佳答案 我认为meta标记的处理方式与title标记相同。如果您使用多个,它们会被后面的覆盖。我不建议使用多个元视口(viewport),页面不会被W3C验证器验证。 关于html-有两个视口(viewport)元标记-一个会被覆盖吗?,我们在StackOverflow上找到一个类似的问题: https://stack

jquery - 如何将高度超过视口(viewport)的固定div粘贴到 body

我知道div的定位(固定、绝对和相对)。我可以将一个固定的div附加到body上,这样它在滚动body时会保持在相同的位置。在这里,我要问一个有点不同的问题。我有一个高度超过视口(viewport)高度的侧边栏,我希望它固定在主体上。滚动body时,它也应该滚动,但一旦固定div的底部可见,它不应该与body一起滚动。例如,Facebook墙的右侧边栏与主体一起滚动,一旦右侧边栏的底部可见(固定),则停止与主体滚动。 最佳答案 这可以通过将侧边栏设置为绝对并在窗口滚动位置通过底部后立即将其更改为固定来实现。CSS:#sidebar{

jquery - 如何将高度超过视口(viewport)的固定div粘贴到 body

我知道div的定位(固定、绝对和相对)。我可以将一个固定的div附加到body上,这样它在滚动body时会保持在相同的位置。在这里,我要问一个有点不同的问题。我有一个高度超过视口(viewport)高度的侧边栏,我希望它固定在主体上。滚动body时,它也应该滚动,但一旦固定div的底部可见,它不应该与body一起滚动。例如,Facebook墙的右侧边栏与主体一起滚动,一旦右侧边栏的底部可见(固定),则停止与主体滚动。 最佳答案 这可以通过将侧边栏设置为绝对并在窗口滚动位置通过底部后立即将其更改为固定来实现。CSS:#sidebar{

html - 元视口(viewport)标签中 "initial-scale"的最小值是多少?

在试验metaviewport标签时,我注意到初始比例的任何小于0.25的值都被视为0.25。例如。以下所有内容渲染页面相同。所以,Istheminimumallowedvaleof"initial-scale"inmetaviewporttag0.25?Whatisthedefaultvalueofinitial-scale?Whydon'tinitialscaletakeit'sdefaultvalue,insteadoftaking0.25,whenblankspaceisgiventoinitialscaleasinitial-scale=? 最佳答

html - 元视口(viewport)标签中 "initial-scale"的最小值是多少?

在试验metaviewport标签时,我注意到初始比例的任何小于0.25的值都被视为0.25。例如。以下所有内容渲染页面相同。所以,Istheminimumallowedvaleof"initial-scale"inmetaviewporttag0.25?Whatisthedefaultvalueofinitial-scale?Whydon'tinitialscaletakeit'sdefaultvalue,insteadoftaking0.25,whenblankspaceisgiventoinitialscaleasinitial-scale=? 最佳答

javascript - Google Pixel 和 Google Pixel XL 设备的视口(viewport)宽度、高度和设备像素比是多少

我正在开发一个网站,想看看它在GooglePixel和GooglePixelXL设备上的运行情况。由于我无权访问这些设备,因此我需要知道这些设备的视口(viewport)宽度、高度和设备像素比。我已经尝试在Google上进行搜索,但仍然找不到任何有用的信息。最新的Chrome也没有在开发者工具中列出这些设备的尺寸。如果任何有权访问这些设备的人都能弄清楚所需的信息,那将非常有帮助。 最佳答案 Pixel和PixelXL均列为具有411×731的css像素分辨率,设备像素比分别为2.6和3.5。来源:https://material.i

javascript - Google Pixel 和 Google Pixel XL 设备的视口(viewport)宽度、高度和设备像素比是多少

我正在开发一个网站,想看看它在GooglePixel和GooglePixelXL设备上的运行情况。由于我无权访问这些设备,因此我需要知道这些设备的视口(viewport)宽度、高度和设备像素比。我已经尝试在Google上进行搜索,但仍然找不到任何有用的信息。最新的Chrome也没有在开发者工具中列出这些设备的尺寸。如果任何有权访问这些设备的人都能弄清楚所需的信息,那将非常有帮助。 最佳答案 Pixel和PixelXL均列为具有411×731的css像素分辨率,设备像素比分别为2.6和3.5。来源:https://material.i

html - 当视口(viewport)调整大小时,如何强制嵌套的 flexbox 元素收缩并显示滚动条?

我正在使用flexbox构建布局,总体来说相当简单。View分为三个部分:顶部的导航栏、左侧的侧边栏和填充剩余空间的内容区域。导航栏的高度固定,侧边栏的宽度固定。此外,侧边栏和内容区域应该单独滚动。如果侧边栏中的内容溢出,它应该创建一个特定于侧边栏的滚动条。内容View也是如此。重要的是,这意味着整个视口(viewport)绝不能滚动:它应该保持静态(只有元素应该滚动)。使用flexbox构建这个布局非常简单:html,body{height:100%;width:100%;}body{margin:0;}#root{display:flex;height:100%;}#frame{d