0

我有一个响应式网站，它在网络和 iPad 上的 768px 看起来很棒。问题是，该应用程序并不是真正为 320 像素宽的 iPhone 构建的。我真的不想做另一个版本——事实上这不是一个选择。

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

我当前的元标记信息是这样的：

<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 移动设备的最佳实践是什么？必须有一个更简单的方法。

我对上面的 hack 感到不舒服。好像很阴暗

4

1 回答 1

0

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

于 2013-06-30T20:39:36.993 回答