在iPhone上查看网站 - 调整问题

时间:2012-05-25 14:22:47

标签: iphone css zoom crop

我希望有一个相对简单的解决方法。我为客户创建了一个简单的网站,可以在所有浏览器中按预期显示。为项目开发一个单独的移动站点不是工作范围的一部分,但我希望该网站能够在现代移动浏览器上正确显示。目前,在iPhone 4上,1000px宽容器的左侧被剪裁(可能是10px),我无法向左滚动以查看它。我想知道这是一个CSS问题还是某种缩放问题?可以访问该网站here

我很难找到与此问题相关的任何资源,但确实找到了这个代码段:

<meta name="viewport" content="width=device-width; initial-scale=0.9;">

这可能是解决方案的开始吗?如果网站加载的默认缩放比例为75%,我会很高兴,但我没有为移动设备编码的经验。

3 个答案:

答案 0 :(得分:4)

因此,就我的具体情况而言,我找到了一个有效的解决方案。希望这对类似情况下的其他人有所帮助。

事实上,密钥在viewport元标记中。我正在使用一个网页,其内容仅限于一个居中的1000px x 600px容器。 THIS文章对于解决这个问题非常有帮助。

正如文章所述,“默认情况下,iPhone上的Safari会将您的页面呈现为大屏幕上的桌面浏览器,网页内容宽度可达980像素。然后它会缩小内容这适合小屏幕。“

在我的情况下,固定宽度为1000px,左边是20px,而且无法平移到它。诀窍是设置自定义宽度(如有必要,设置高度)。 务必以垂直和水平iPhone方向检查网站。您可以使用此元标记的其他参数,但我保持简单。

这是我在网站的<head></head>标记之间包含的代码:

<meta name="viewport" content="width=1050px, height=650px" />

这使我在网站内容周围有25px的白色边框,并且仍然允许缩放等。这不是iPhone特定网站的替代品,但它确保用户能够访问所有网站的内容

希望这有帮助!

答案 1 :(得分:2)

尝试删除初始比例。

<meta name="viewport" content="width=device-width;">

答案 2 :(得分:1)

如果您想为移动视图更改某些CSS,可以使用名为adapt.js的工具进行此操作。它选择与屏幕分辨率相关的样式表。