Question

我正在为手机和平板电脑开发一个网站。对于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=""

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

还有其他方法可供使用吗？

Answer 1

仅使用css文件底部的“@media screen和（max-width：Xpx）”。

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

只要使用比屏幕宽度略大的数字，就有误差，你就可以了。

我喜欢用：
@media screen和（max-width：1100px）{}
@media屏幕和（最大宽度：660px）{}
@media screen和（max-width：500px）{}
@media screen和（max-width：400px）{}

媒体查询iPhone

1 个答案: