媒体查询问题 - 缩小iPhone /手机的尺寸？

Question

我有一个快速响应的网站，在网络和iPad上看起来很棒，只有768像素。事实上，该应用程序并非真正适用于iPhone 320px宽。我真的不想做另一个版本 - 事实上它并不是一个真正的选择。

我的问题是，如何扩展整个应用程序以适应iphone，而不会影响我对768px响应式设计的媒体查询（即@media only screen and (max-width: 1024px) and (min-width: 768px)）。

我当前的元标记信息是：

<meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0" />
<meta name="viewport" content="width=device-width" />

使用像这样的css缩放/缩放是否有意义 - 仅针对iPhone /移动单元？

@media only screen and (min-width: 320px) and (max-width: 568px) {
    html {
        zoom: 50%;
    }
}

将768px响应式设计扩展到适合320px-568px移动设备的最佳做法是什么？必须有一个更简单的方法。

我对上面的黑客感到不舒服。看起来很阴暗。

Answer 1

好的，我找到了解决方案。我删除了@Media查询缩放，并从元标记中删除了minimum-scale=1.0。这仍然允许我的应用程序的媒体查询768px启动。然而，在移动设备320px-568px上，该网站将缩小以适应iPhone屏幕。作品。不是一个适合移动设备的解决方案，但会做到。我们的网络应用程序不适用于移动用户（手机）。