Question

考虑以下基本的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上观看时，980px的主要内容区域将不会自动缩放以适合iPad屏幕。但是，如果您用大量内容替换A small amount of content，即...足以导致垂直滚动，则页面会在iPad上自动缩放。

有谁知道这是为什么？我一直在搜索高低，当页面上的内容很少时，似乎找不到强制自动缩放的方法。

将视口内容更改为width=980当然会解决问题，但我正在创建自适应网站，因此视口需要为device-width。

我正在使用媒体查询来改变智能手机上内容区域的CSS（达到100％宽度），我希望能够在iPad上使用该网站的标准桌面版本。

非常感谢任何想法。

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

Answer 1

经过一段时间的休息后，我以不同的角度回来 - 如果将视口宽度设置为特定值可以修复我的iPad问题，为什么不这样做呢。

因此我的解决方案是将视口宽度默认为设备宽度以处理智能手机设备，然后检测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>

感谢您的建议insertusernamehere

Answer 2

试试这个：

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

之后整个内容都适合。

iPad缩放以适合在内容最少的网页上无效

2 个答案: