iPhone/iPad 上的不同缩放比例答案

【问题标题】：Different scaling on iPhone/iPadiPhone/iPad 上的不同缩放比例
【发布时间】：2011-04-13 10:59:38
【问题描述】：

我正在尝试为我的朋友兄弟完成一个网站，并且一切（几乎）都运行良好。

该网站是用一个居中的容器构建的，距离左侧大约 15-20% 的空间。

问题在于，当您在 iPhone 或 iPad 中打开它时，网站会被缩放，以便移除左侧的空间，而文本的开始位置正好是屏幕开始的位置。我希望我的解释是正确的。

是否有一种简单的方法可以让我仅针对移动设备更改此设置？可惜我在手机设计方面没有任何经验..

提前致谢！

【问题讨论】：

如何在 html 页面上留出空白？可能是 iPhone 设备不支持。您使用的是哪个版本的 HTML？您在哪部 iPhone 上测试过（3G、4 或其他）。

标签： php iphone css ipad

【解决方案1】：

您正在使用百分比将容器向左移动？

你确定你没有用 CSS 给容器一个固定的width 和margin:0 auto; 吗？然后把这个meta标签放到HTML网页的头部，让手机正确对待？

<meta name="viewport" content="width=device-width; initial-scale=1.0;maximum-scale=1.0;" />

因为据我所知，您使用的是margin:0 auto; 居中方法。

给容器一些填充，例如padding:1em;，你应该没问题。 :)

【讨论】：

对不起，我没有用百分比移动它，宽度通过css设置为100％，填充和边距为0，是否需要自动？感谢您的帮助！该元标记会帮助我们吗？
元标记调整视图的大小，使其只占用手机所需的空间（我只用安卓测试过）。如果它的宽度是100%，那么左边的间距是怎么得到的呢？
嗯，我还没修好。一个朋友现在正在看，但似乎比我想象的要困难得多。网址是seorapport.se（临时）。在桌面上它正常显示，但在 iphone 上空间被删除.. 我们正在查看它.. 你有什么想法吗？谢谢兄弟。
看起来你只需要添加一些填充。但是你需要对每个接触侧面的元素都这样做，例如.port { padding:0 10px; }你可能想根据额外的填充来减小宽度，看起来工作量很大，所以我明天再看看。跨度>
非常感谢。好吧，我不知道它是否需要大量工作，该站点使用 include menu.php、main.php（索引）和 footer.php。它下面大约有 30 页，但它们由全局的 style.css 控制。也许我不需要改变那么多。但是，如果有一个元标记或可以在 iphone 访问时调整网站大小的东西会容易得多:) 谢谢@YuriKolovsky

【解决方案2】：

您可以通过查找其设备参数在页面标题中包含 css

<style type="text/css" media="screen and (max-device-width: 480px)">
    /*for iphone only*/
</style>

或者另一种方法是只为移动设备创建一个 css 文件 mobile.css 并通过下面的 javascript 包含这个 css：-

<script type="text/javascript">
    // checking if the device is iphone, ipod or ipad
    if ((navigator.userAgent.indexOf("iPad") > 0)
        || (navigator.userAgent.indexOf("iPod") > 0)
        || (navigator.userAgent.indexOf("iPhone") > 0)) {
        // including the css file
        document.write("<link href='mobile.css' rel='stylesheet' type='text/css' />");
    }
</script>

【讨论】：

我尝试了您发布的第一个代码，我认为它会起作用。我只是不知道如何调整 iphone 的网站大小，以便增加一点空间。就像在 apple.com 上一样，它提供了 5-10 像素的空间，非常适合我。