4

考虑以下基本的 html 代码块：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>iPad test</title>
    <meta name="viewport" content="width=device-width">
    <style>
        body
        {
            margin:0;
        }
        #content
        {
            margin: 0 auto;
            width: 980px;
            border:1px solid #c4c4c4;
            background-color:#f5f5f5;
        }
    </style>
</head>
<body>
<div id="content">
    A small amount of content
</div>
</body>
</html>

在 iPad 上查看时，980 像素的主要内容区域不会自动缩放以适应 iPad 屏幕。但是，如果您替换A small amount of content为大量内容，即...足以导致垂直滚动，则页面在 iPad 上会自动缩放。

有人知道为什么是这样吗？我一直在搜索高低，似乎无法找到一种方法来强制在页面上的内容很少时发生自动缩放。

更改视口内容width=980当然可以解决问题，但是我正在创建一个响应式网站，因此视口需要是device-width.

我正在使用媒体查询来更改智能手机上内容区域的 CSS（宽度为 100%），并且我希望将网站的标准桌面版本用于 iPad。

任何想法将不胜感激。

注意：我在带有视网膜显示屏的 iPad 上进行测试，我不确定在旧型号上会发生什么。

4

2 回答 2

7

休息后，我以不同的角度回来了 - 如果将视口宽度设置为特定值可以解决我在 iPad 上的问题，为什么不这样做。

所以我的解决方案是将视口宽度默认为 device-width 以处理智能手机设备，然后检测 iPad 并调整视口宽度：

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

<script type="text/javascript">
    if(navigator.userAgent.match(/iPad/i)) {
        viewport = document.querySelector("meta[name=viewport]");
        viewport.setAttribute('content', 'width=980');
    }
</script>

感谢您的建议在此处插入用户名

于 2012-07-13T04:04:43.157 回答
2

试试这个：

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

整个内容将适合之后。

于 2012-07-03T17:14:23.360 回答