草庐IT

viewport-vw

全部标签

html - 使 div 的高度为视口(viewport)高度的 100% 或页面的整个高度

如果您看一下这个jsfiddle示例:http://jsfiddle.net/2YbpZ/您可以看到sidebar和content元素都延伸到了视口(viewport)的底部。这就是我想要的。但是,当给定一些拉伸(stretch)页面并需要用户滚动的内容时:http://jsfiddle.net/p6qGg/sidebar和contentdiv在视口(viewport)底部被截断。我知道为什么会发生这种情况,因为100%指的是父元素的整个高度,在本例中是视口(viewport),但是当我更改标记以使两个元素周围有一个包装div时并设置min-height:100%这会发生:http:/

html - 禁用固定视口(viewport)大小的移动设备缩放

我正在尝试禁用移动设备上的缩放功能。我知道这段代码会起作用。但就我而言,我无法选择使用“width=device-width”。我必须将视口(viewport)大小设置为480px,所以我使用以下代码但我在移动设备上看到了一个放大的页面View,我可以将其缩小。 最佳答案 使用“target-densitydpi=device-dpi”和代码解决了我的问题。感谢DaveRook 关于html-禁用固定视口(viewport)大小的移动设备缩放,我们在StackOverflow上找到一个类

html - 禁用固定视口(viewport)大小的移动设备缩放

我正在尝试禁用移动设备上的缩放功能。我知道这段代码会起作用。但就我而言,我无法选择使用“width=device-width”。我必须将视口(viewport)大小设置为480px,所以我使用以下代码但我在移动设备上看到了一个放大的页面View,我可以将其缩小。 最佳答案 使用“target-densitydpi=device-dpi”和代码解决了我的问题。感谢DaveRook 关于html-禁用固定视口(viewport)大小的移动设备缩放,我们在StackOverflow上找到一个类

html - Safari 视口(viewport)错误,固定位置和底部或顶部的问题

我在iOS12.3.1Safari中遇到了一些奇怪的事情。这个问题至少可以追溯到iOS12.2,但我想这个问题的存在时间要长得多。当尝试将元素与视口(viewport)的底部轴对齐时,问题就会显现出来,并且在纵向和横向模式下都是一个问题。为了重现问题,元素必须有fixed或absolute的position,但是您是否使用top和transform或bottom定位元素。人像模式问题仅在纵向模式下出现,如果Safari正在显示其压缩的URL栏,它取代了正常的URL和菜单栏,并且没有垂直溢出。普通URL和菜单栏//压缩URL栏值得注意的是,仅当存在垂直溢出且浏览器向下滚动或浏览器的方向从

html - Safari 视口(viewport)错误,固定位置和底部或顶部的问题

我在iOS12.3.1Safari中遇到了一些奇怪的事情。这个问题至少可以追溯到iOS12.2,但我想这个问题的存在时间要长得多。当尝试将元素与视口(viewport)的底部轴对齐时,问题就会显现出来,并且在纵向和横向模式下都是一个问题。为了重现问题,元素必须有fixed或absolute的position,但是您是否使用top和transform或bottom定位元素。人像模式问题仅在纵向模式下出现,如果Safari正在显示其压缩的URL栏,它取代了正常的URL和菜单栏,并且没有垂直溢出。普通URL和菜单栏//压缩URL栏值得注意的是,仅当存在垂直溢出且浏览器向下滚动或浏览器的方向从

html - 使用 100vw 和 vh 会创建超出视口(viewport)大小的额外空间。我该如何摆脱它?

尝试在div上使用100vw和100vh制作全屏帧。我有2个thisJSfiddle正如您所看到的,每个框架的底部和右侧都有额外的空间。有没有一种方法可以使用vw和vh并在没有额外空间的情况下使其完美契合?CSS看起来像这样:.f1{width:100vw;height:100vh;background-color:blue;}.f2{width:100vw;height:100vh;background-color:grey;}*编辑:似乎将宽度设置为100%可以解决这个问题,但是这个解决方案合适吗?它会破坏任何东西吗? 最佳答案

html - 使用 100vw 和 vh 会创建超出视口(viewport)大小的额外空间。我该如何摆脱它?

尝试在div上使用100vw和100vh制作全屏帧。我有2个thisJSfiddle正如您所看到的,每个框架的底部和右侧都有额外的空间。有没有一种方法可以使用vw和vh并在没有额外空间的情况下使其完美契合?CSS看起来像这样:.f1{width:100vw;height:100vh;background-color:blue;}.f2{width:100vw;height:100vh;background-color:grey;}*编辑:似乎将宽度设置为100%可以解决这个问题,但是这个解决方案合适吗?它会破坏任何东西吗? 最佳答案

html - Safari 是否有显示视口(viewport)大小的免费扩展

我有一个很好的chrome扩展('WindowResizer')可以显示视口(viewport)大小,但我不知道如何在不使用鼠标的情况下清除chrome中的缓存,所以我倾向于使用Safari进行浏览器开发.我环顾四周,似乎找不到在Safari中显示视口(viewport)大小的扩展(我可以找到各种允许我设置视口(viewport)大小的扩展,但没有一个在我更改时显示它手动)。有人知道可以执行此操作的免费扩展程序吗? 最佳答案 这个免费的SafariExtensions在调整大小时显示视口(viewport)宽度和高度:https:/

html - Safari 是否有显示视口(viewport)大小的免费扩展

我有一个很好的chrome扩展('WindowResizer')可以显示视口(viewport)大小,但我不知道如何在不使用鼠标的情况下清除chrome中的缓存,所以我倾向于使用Safari进行浏览器开发.我环顾四周,似乎找不到在Safari中显示视口(viewport)大小的扩展(我可以找到各种允许我设置视口(viewport)大小的扩展,但没有一个在我更改时显示它手动)。有人知道可以执行此操作的免费扩展程序吗? 最佳答案 这个免费的SafariExtensions在调整大小时显示视口(viewport)宽度和高度:https:/

html - vw 和 vh 单位如何工作?

我想知道如何计算vh和vw的值。我正在设计一个使用2vw的网站,它非常适合我的文本。不过,我也只是猜测。请告诉我这些单元是如何工作的,以便我将来可以使用它们。我还想知道他们是否支持跨浏览器。 最佳答案 vw和vh分别是窗口宽度和高度的百分比:100vw是宽度的100%,80vw是80%等。要计算以像素为单位的值,您只需执行类似的操作vwToPx=function(vwValue){return$(window).outerWidth()/100*vwValue;}您应该注意的一件事是,移动版Safari仍然会错误地呈现vh,而且除了