iPad缩放适合不适用于具有最少内容的网页 [英] iPad zoom to fit doesn't work on webpage with minimal content
问题描述
请考虑以下基本的html代码块：
<！doctype html&
< html>
< head>
< meta charset =utf-8>
< title> iPad测试< / title>
< meta name =viewportcontent =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>
少量内容
< / div>
< / body>
< / html>
在iPad上查看时，980像素的主要内容区域不会自动缩放到适合iPad屏幕。但是，如果用大量内容替换少量内容，即...足以导致垂直滚动，则该页面会在iPad上自动缩放。 / p>
有人知道为什么会这样吗？我一直在搜索高和低，并且似乎找不到一个方法来强制自动缩放发生时，页面上有最小的内容。
更改视口内容到 width = 980 修复问题当然，但我创建一个响应式网站，因此视口需要 device-width 。
我使用媒体查询来改变智能手机上内容区域的CSS（到100％宽度），我希望使用
任何想法都将非常感激。
从这里开始休息一下，我回来了一个不同的角度 - 如果将视口宽度设置为一个特定的值修正了我的问题，为iPad，为什么不这样做。
我将视口宽度默认为device-width以处理智能手机设备，然后检测iPad并调整视口宽度：
< meta name =viewportcontent =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
Consider the following rudimentary html code block:
<!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>
When viewed on an iPad, the main content area of 980px will not be auto zoomed to fit the iPad screen. However, if you replace A small amount of content with a large amount of content, ie... enough to cause vertical scrolling, the page is auto zoomed on the iPad.
Does anyone know why this is? I have been searching high and low and can't seem to find a way to force the auto zooming to occur when there is minimal content on the page.
Changing the viewport content to width=980 fixes the issue of course, however I am creating a responsive website, therefore the viewport needs to be device-width.
I am using a media query to alter the CSS for the content area on smart phones (to 100% width), and I was hoping to use the standard desktop version of the website for iPads.
Any ideas would be much appreciated.
Note: I am testing on an iPad with retina display, I'm not sure what happens on older models.
After a break from this, I came back with a different angle - if setting the viewport width to a specific value fixes my issue for the iPad, why not do just that.
So the solution for me was to default the viewport width to device-width to handle smart phone devices, then detect for iPads and adjust the viewport width:
<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>
Thanks for your suggestions insertusernamehere
这篇关于iPad缩放适合不适用于具有最少内容的网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
