草庐IT

Viewport3

全部标签

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:/

javascript - 视口(viewport)大小改变时自动刷新页面

我正在为我的网站使用响应式和自适应媒体查询以适应智能手机......现在的问题是我的最大宽度移动查询以480像素结束,这是大多数手机旋转显示宽度(当手机在其上时边...)。现在一些手机,比如HTCdesire的最大屏幕宽度为533px,现在当用户第一次在垂直位置加载页面(320px屏幕宽度)并且他/她旋转屏幕到533px宽度时,它超出了我的设计规范它看起来有点糟糕……(因为布局是为最大480像素设计的……)现在解决这个问题的唯一方法是在视口(viewport)尺寸发生变化后刷新页面。如何强制刷新?谢谢 最佳答案 如果设备旋转窗口调整

javascript - 视口(viewport)大小改变时自动刷新页面

我正在为我的网站使用响应式和自适应媒体查询以适应智能手机......现在的问题是我的最大宽度移动查询以480像素结束,这是大多数手机旋转显示宽度(当手机在其上时边...)。现在一些手机,比如HTCdesire的最大屏幕宽度为533px,现在当用户第一次在垂直位置加载页面(320px屏幕宽度)并且他/她旋转屏幕到533px宽度时,它超出了我的设计规范它看起来有点糟糕……(因为布局是为最大480像素设计的……)现在解决这个问题的唯一方法是在视口(viewport)尺寸发生变化后刷新页面。如何强制刷新?谢谢 最佳答案 如果设备旋转窗口调整

html - 视口(viewport)高度 100% 不适用于页面元素

我不知道为什么我的边框停在页面底部之前。我尝试了很多事情:清除float、100%、jQuery、vh、vmax+我已经从stackoverflow阅读了其他问题,但它总是在底部之前停止。我有两个divsection.left和section.middle。我试图在section.leftdiv上设置一个8px边框,使其从页面顶部到底部。但如果页面变长,它就会停止。参见demoHTMLLoremipsumdolorsitamet,consectetueradipiscingelit.Sedposuereinterdumsem.Quisqueligulaerosullamcorperqu

html - 视口(viewport)高度 100% 不适用于页面元素

我不知道为什么我的边框停在页面底部之前。我尝试了很多事情:清除float、100%、jQuery、vh、vmax+我已经从stackoverflow阅读了其他问题,但它总是在底部之前停止。我有两个divsection.left和section.middle。我试图在section.leftdiv上设置一个8px边框,使其从页面顶部到底部。但如果页面变长,它就会停止。参见demoHTMLLoremipsumdolorsitamet,consectetueradipiscingelit.Sedposuereinterdumsem.Quisqueligulaerosullamcorperqu