iphone - 纵向查询所有智能手机

Question

我试图实现的是一个媒体查询，它只适用于纵向方向的所有智能手机

到目前为止，我一直在使用这个，但它不适用于 iPhone 5。这是为什么？

@media only screen and (max-width:800px) and (orientation: portrait){
    aside{ display: none;}
}

score 0 · Accepted Answer

iPhone 5 显示分辨率为 1136 x 640 像素。新触摸屏的对角线尺寸为 4 英寸，纵横比为 16:9，并带有 326 ppi（每英寸像素）的 Retina 显示屏。

尝试：

@media only screen and (min-width: 560px) and (max-device-width: 1136px) {
   aside{ display: none;}
}

score 0 · Accepted Answer

纵向的所有移动屏幕：

在 CSS 中：

@media only screen and (max-device-aspect-ratio: 1) and (orientation: portrait) {
     aside{ display: none;}
}

具有明确设置视口宽度的纵向小型移动屏幕：

在 HTML 中声明此缩放模式<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在 CSS 中：

@media only screen and (max-width: 479px) and (max-device-aspect-ratio: 1) and (orientation: portrait) {
     aside{ display: none;}
}

所有具有默认视口宽度（980px）的纵向移动屏幕：

注意：在现代网页设计中，定义视口宽度而不是默认的 980 像素已成为标准做法。它是响应式设计不可或缺的一部分。我强烈建议花一些时间来了解它。

在 CSS 中：

@media only screen and (width: 980px) and (max-device-aspect-ratio: 1) and (orientation: portrait) {
     aside{ display: none;}
}

2 回答 2