【发布时间】：2013-07-01 04:39:36
【问题描述】：
我有一个响应式网站，它在 Web 和 iPad 上的 768 像素时看起来都很棒。问题是，该应用程序并不是真正为 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%;
}
}
将我的 768 像素响应式设计缩放以适应 320 像素到 568 像素的移动设备的最佳做法是什么？必须有一个更简单的方法。
我对上面的 hack 感到不舒服。看起来很阴暗。
【问题讨论】：
-
我们可以看看您目前的设计吗？ IMO 缩放网站将是一个糟糕的决定，您真的应该考虑构建一个完全可折叠的网站，缩小到 320 像素
-
不能在展示网站上做。现在是本地主机。是的，构建一个 320px 的响应式站点对我们的应用程序不起作用，原因有很多。我们有一个无法构建到 320 像素的广告系列构建器；
-
我不需要移动版本进行缩放或响应。我的正常设计（在网络浏览器上查看）是响应式 980 像素设计。如果这能填满 iphone 的视口，我会很高兴。虽然无法让它工作
-
完全删除
meta标签会是什么样子？我希望在 iPhone 和 Android 上最初应该使全宽可见 - 但它看起来很差。 -
好吧，你对那个解决方案满意吗？
标签： html responsive-design media-queries