将视口保持在同一高度

时间:2016-11-18 16:29:20

标签: html css zoom viewport pixel

我希望具有固定像素大小的页面始终具有相同的percantage hight。我不能使用%或任何其他相对单位,因为我已经以像素为单位制作了整个网站。

意思是当我有一个高达1500px的div并在1366x768屏幕上查看时,整个1500px div仍应完全可见。

我想要完成的效果类似于浏览器缩放。

2 个答案:

答案 0 :(得分:0)

你可以在div上尝试min-height: 1500px;,然后将overflow-y: auto放在body或html元素上。

如果你想根据窗口高度动态调整大小,你可以查看CSS flexbox,使用vh大小调整,或使用javascript来检测窗口大小调整。

答案 1 :(得分:0)

您可以使用viewport meta tag。只需删除" initial-scale = 1"部分和页面应始终呈现以适合屏幕。

您应该注意,这可能会导致页面显示得非常小,这可能会导致人们想要使用智能手机访问它时出现问题。如果您想针对不同的设备和屏幕优化您的网页,建议您熟悉responsive webdesign

高度:100vh;会使对象的高度为视口高度的100%。似乎没有办法从px切换到其他东西。