媒体查询用于桌面屏幕和手机屏幕

我有这样的媒体查询：媒体查询用于桌面屏幕和手机屏幕

@media only screen 
and (max-width : 320px), 

only screen 
and (max-device-width : 320px) 
and (min-device-pixel-ratio : 2), 

only screen 
and (max-device-width : 320px) 
and (-webkit-min-device-pixel-ratio : 2), 

only screen 
and (max-device-width : 320px) {

它在桌面上，选择浏览器小于320像素宽度，iPhone 4的人像，但它也选择iPhone 4的景观。当然，这不应该选择横向的iPhone 4的？

从我的理解，第一部分选择宽度小于320px的屏幕。

第二部分相同的第二但webkit的供应商前缀

第三部分选择在移动设备的屏幕宽度小于320像素，但是具有双像素密度（iPhone 4/4S在这种情况下）

和第四部分与前两部分相同，但没有双像素密度，因此应选择iPhone 3gs和其他最大宽度为320px的移动设备。因此，我基于上述不希望它在任何iPhone上选择横向模式？

任何想法如何添加到它来解决？

尼尔

来源

2012-06-17 rctneil

你更容易解决具体问题时，并呈现出一些研究工作后能得到有用的答案。请参阅[stackoverflow FAQ]（http://stackoverflow.com/faq），以获取更多关于此处发布的问题的预期格式的信息，并相应地修改您的问题。欢迎登机，顺便说一句 –

这是一个特定的问题，媒体查询是选择横向的iPhone，当我期望它不是。我自己写了媒体查询，这是我面临的问题。因此我的问题在上面。第二部分只是一个相关的问题。我知道有两种方法可以实现它并理解它们的积极和消极之处，但是想要其他人的想法，那肯定没有问题？尼尔 – rctneil

没有错，我只是说，你应该把它分成两个问题，并详细说明你到目前为止已经尝试 –

您应该添加orientation : landscape你的CSS，像这样：

@media only screen 
and (max-device-width : 320px) 
and (orientation : landscape) { 
    /* Styles */ 
}

来源

2012-06-17 16:13:07

好吧，iPhone仍然报告其宽度为320px即使在风景中？如果是这样，那么必须使用方向选项 – rctneil

我觉得'orientation'是为移动设备制作的。你不能在你的电脑显示器上使用它，因为没有肖像取向！ –

我的建议是尝试与iPhone的CSS。 –

媒体查询用于桌面屏幕和手机屏幕

回答

相关问题