媒体查询 - 屏幕高度/设备

Question

我建立了一个网站,其中包含一个固定位置的扩展/收缩搜索表单.这在桌面上很有用 - 但是对于任何不允许所需高度的建议当然会有问题.我打算使用媒体查询高度,即 -

@media (min-height: 700px) {
    #quick-search{position:relative;}

}

并将快速搜索内联放置在没有可滚动高度的设备上 - 以确保它可以滚动.

但我的理解是,某些设备OS /浏览器将高度称为文档高度而不是视口高度 - 因此上述解决方案不会将QS转换为内联所有必需的方案.我对此是否正确？如果是这样,任何人都可以提出适合所有情况的替代解决方案吗

Answer 1

只要您拥有正确的元标记,它就会使用视口进行计算.

<meta name="viewport" content="width=device-width">

要使用屏幕高度添加screen到媒体

@media screen and (min-height: 700px) {
    #quick-search{position:relative;}

}