0

为什么在 iOS 6.1 上的 Mobile Safari 上查看时，这个 jsfiddle 页面显示为缩小？我希望它占据整个宽度，但它会缩小。我有如下非常无聊的 CSS，但我错过了一些东西。

.foo {
    overflow: auto;
    overflow-y: hidden;
    height: 100px;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}
.foo ul li {
    display: inline-block;
    border: 1px blue solid;
    max-width: 100px;
    overflow: auto;
    white-space: normal;
}
4

1 回答 1

2

添加

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

在 - 的里面<head>

工作示例（独立）

工作示例（jsfiddle）

背景：默认情况下，移动 Safari 显示画布宽度为 980 像素的页面（请参阅此答案），“width”参数会覆盖此参数，“device-width”会自动将其设置为您的任何尺寸（或纵向/横向）使用。它最初是由 Apple 推出的，但现在几乎所有东西都支持它。

为了在 jsFiddle 中工作，您需要将元标记添加到 CSS 窗格，但将其包装在</style>/<style type="text/css">标记中，以便它出现在头部。此外，普通的嵌入共享链接不起作用，因为所有内容都包装在 iframe 中，因此您需要直接分解其中的内容：.../show/light/

（如果你有一台 Mac，iOS 模拟器对于这种事情很方便 - 需要安装 XCode。还有 Chrome 开发工具 > 设置（齿轮图标，右下角）> 覆盖 > 设备指标）

于 2013-07-19T07:39:11.313 回答