查询在纵向所有的智能手机

-1

什么即时试图实现的是一个媒体查询，将只工作在所有的智能手机上的肖像orentation查询在纵向所有的智能手机

我用至今这一个，但它不是在iPhone 5的工作。为什么是这样？

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

尝试::（最大宽度：568px） – 2013-03-19 11:34:32

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

2013-03-19 11:34:54 Smartis

它不工作:( – 2013-03-19 11:46:53

查看本页面：http://www.screenresolution.org/ – Smartis 2013-03-19 11:53:45

您是否使用了真正的iPhone或模拟器？ – Smartis 2013-03-19 11:54:22

所有手机屏幕纵向：

在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像素。它是Responsive Design的组成部分。我强烈建议花一些时间来了解它。

在CSS：

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

2013-03-19 12:14:17

添加meta标签使得我的网页在iPhone5上看起来很奇怪。它只是填充屏幕宽度的一半 – 2013-03-19 13:40:06

我更新了元视口标记以包含初始缩放比例，也许这会使它看起来不错。否则，我在下面添加了另一个解决方案，您可能会满意 – 2013-03-19 14:30:19

回答