网站不会自动适应 iPhone 屏幕答案

【问题标题】：Website does not automatically fit to iphone screen网站不会自动适应 iPhone 屏幕
【发布时间】：2011-02-10 00:36:47
【问题描述】：

以下代码不适合 iphone 屏幕；如何定义视口？

<html>
<body>
<center>
<div id="karteu" style="background: url('../customer/Karten/karte1.jpg') no-repeat left center;width:714px;height:540px;" >
</div>
</body>
</html>

通常网站应该被缩放，所以我首先应该看到这个网站很小，然后能够放大我看到它的原始大小，但在我的情况下它没有，当我调用该网站时，缩放是，图像已经具有这个原始大小，并且我必须滚动，但我不想滚动，...我想使用普通的 safari 移动缩放，然后滚动

底部的解决方案不会缩放任何东西。我想在开始时查看图像的概述。然后我希望能够使用正常的 Safari 缩放功能进行缩放，..

【问题讨论】：

您可能想编辑您的帖子并提供更多信息
@oezi, @Ondrej：问题格式错误；现已修复。
iPhone的分辨率不是480x320吗？你能在那个屏幕上显示 714x540 DIV 吗？我只是在猜测为什么它不适合...

标签： iphone mobile safari webkit web-applications

【解决方案1】：

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />

【讨论】：

谢谢！以上答案有效！唯一的问题是，您还必须使您的宽度 = 100% ！不得不进入我使用的 Dreamweaver 中的代码，并将 css 样式表更改为容器的宽度不是 320 像素，而是 100%。现在它在我的 ipod touch 和 android 手机上都能完美运行。
这太棒了。重复。你甚至可以拥有minimum-scale=0.77
这种视口语法适用于大多数浏览器。但不是（我发现）Cordova 嵌入式。视口内容中的正确分隔符是逗号，而不是分号。 alxgbsn.co.uk/2011/11/23/…

【解决方案2】：

使用以下元标记：

<meta name="viewport" content="width=*your site width*, initial-scale=0.30">

适用于平板电脑和移动设备

【讨论】：