调整媒体查询以处理 iphone 5

Question

我有一个针对 iphone 6 可以正常显示的网页。有没有一种简单的方法可以通过针对 iphone 5 的媒体查询来调整屏幕大小，从而使所有内容都能正常缩小？

我知道如何为 Iphone 5 触发 CSS 我正在寻找的是一种轻松设置 CSS 的方法，因此它只是为 iphone 5 重新格式化的一个 CSS 命令。假设你已经为 Iphone 工作了6、我们能不能只为 Iphone 5 设置一个缩小的宽度，然后让一切自动缩小？

Answer 1

仅限 iPhone 5（纵向模式）

@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:portrait)
{
   ...
}

仅限 iPhone 5（横向模式）

@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:landscape)
{
   ...
}

另一个有用的媒体功能是

device-aspect-ratio

请注意，iPhone 5 没有 16:9 的纵横比。实际上是 40:71。

iPhone 5:
@media screen and (device-aspect-ratio: 40/71) {}