媒体查询 iPhone答案

【问题标题】：Media Query iPhone媒体查询 iPhone
【发布时间】：2013-12-04 22:37:44
【问题描述】：

我正在为手机和平板电脑开发一个网站。 iPhone 5 我正在使用

@media only screen
and (max-device-width: 320px)
and (orientation: portrait) {}

和

@media only screen
and (min-device-width: 568px)
and (orientation : landscape) {}

我正在使用 ipad

link rel="" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href=""

link rel="" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait )" href=""

但两者都在合并，不知道如何。

还有其他使用方法吗？

【问题讨论】：

“两者都在合并”是什么意思？
两者都意味着我正在 iPhone5 和 iPad 上进行测试。如果我删除 iPhone 媒体，那么它将在 ipad 上运行，如果我删除 ipad 媒体，那么它将在 iphone 上运行。

标签： css media-queries

【解决方案1】：

仅在您的 css 文件底部使用“@media screen and (max-width: Xpx)”。

此 Chrome 应用程序 https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh 将为您提供所有最常见的屏幕尺寸，以便您自动调整浏览器窗口的大小。

只需使用一个比屏幕宽度大一点的数字，有一定的误差，就可以了。

我喜欢使用：
@media 屏幕和（最大宽度：1100 像素）{}
@media 屏幕和（最大宽度：660 像素）{}
@media 屏幕和（最大宽度：500 像素）{}
@media 屏幕和（最大宽度：400 像素）{}

【讨论】：