Question

我想要实现的是一种媒体查询，该功能仅适用于所有智能手机上的

到目前为止，我正在使用这个，但它在iPhone 5中不起作用。为什么会这样？

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

Answer 1

iPhone 5的显示分辨率为1136 x 640像素。对角线长4英寸，全新触摸屏的宽高比为16：9，标有Retina显示屏，显示屏为326 ppi（每英寸像素数）。

尝试：

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

Answer 2

所有移动屏幕均为纵向：

在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;}
}

所有移动屏幕均为纵向，默认视口宽度（980像素）：

注意：现代网页设计中的标准做法是定义视口宽度，而不是将其保留为默认的980px。它是Responsive Design的组成部分。我强烈建议花一些时间来了解它。

在CSS中：

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