考虑以下基本的 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 屏幕。但是，如果您将 少量内容 替换为大量内容，即...足以引起垂直滚动，页面会在 iPad 上自动缩放。
有人知道这是为什么吗？我一直在上下搜索，似乎找不到一种方法来在页面上的内容最少时强制进行自动缩放。
将视口(viewport)内容更改为 width=980 当然可以解决这个问题，但是我正在创建一个响应式网站，因此视口(viewport)需要为 device-width。
我正在使用媒体查询更改智能手机内容区域的 CSS(宽度为 100%)，我希望使用适用于 iPad 的标准桌面版网站。
任何想法将不胜感激。
注意:我正在带视网膜显示屏的 iPad 上进行测试，我不确定在旧型号上会发生什么情况。
最佳答案
在此休息之后，我以不同的 Angular 回来了 - 如果将视口(viewport)宽度设置为特定值可以解决我的 iPad 问题，为什么不这样做。
所以我的解决方案是将视口(viewport)宽度默认为设备宽度以处理智能手机设备，然后检测 iPad 并调整视口(viewport)宽度:
<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
关于html - iPad 缩放以适合在内容最少的网页上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11306973/