gme*_*_99 4 html css viewport ipad
考虑以下基本的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.
任何想法将不胜感激.
注意:我在带有视网膜显示器的iPad上进行测试,我不确定旧型号会发生什么.
经过一段时间的休息后,我以不同的角度回来了 - 如果将视口宽度设置为特定值可以解决我的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