我一直在为网页开发一个反应式设计。当在桌面上查看时，整个页面显示（浏览器窗口缩小到手机大小），但是当用iPhone观看时（在Android上也是如此），前100个像素位于页面顶部。有人遇到过这个问题吗？
我的代码和CSS如下：
<link rel="stylesheet" type="text/css" href="Tin_Mouse_size.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
// When ready...
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
</script>
</head>
<body>
<body onload="MM_preloadImages('Images/Roll_Overs_Home_On.png','Images/Roll_Overs_Me_On.png','Images/Roll_Overs_Work_On.png','Images/Roll_Overs_Contact_On.png')">
<div id="centeredcontent">
<div id="blank"></div>
<div id="home">
<a href="http://www.google.co.uk" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','Images/Roll_Overs_Home_On.png',1)"><img src="Images/Roll_Overs_Home_Off.png" alt="Home" name="Image1" width="100%" height="100%" border="0" id="Image1" /></a>
</div>
<div id="me">
<a href="http://www.google.co.uk" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','Images/Roll_Overs_Me_On.png',1)"><img src="Images/Roll_Overs_Me_Off.png" alt="Me" name="Image2" width="100%" height="100%" border="0" id="Image2" /></a>
</div>
<div id="work">
<a href="http://www.google.co.uk" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','Images/Roll_Overs_Work_On.png',1)"><img src="Images/Roll_Overs_Work_Off.png" alt="Work" name="Image3" width="100%" height="100%" border="0" id="Image3" /></a>
</div>
<div id="contact">
<a href="http://www.google.co.uk" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','Images/Roll_Overs_Contact_On.png',1)"><img src="Images/Roll_Overs_Contact_Off.png" alt="Contact" name="Image4" width="100%" height="100%" border="0" id="Image4" /></a>
</div>
<div class="Contact_Holder_Div">
<div class="Designed_In_Cornwall"><a href="mailto:info@dandcauctions.co.uk" title="Email Us" class="designed_in_cornwall_button"></a></div>
<div class="Email"><a title='Click Me and send an email' href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Email','','Images/mail-square.png',1)"><img src="Images/mail.png" alt="Email" name="Email" width="100%" height="100%" border="0" id="Email" /></a></div>
<div class="gtalk"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Google Talk','','Images/gtalk-square.png',1)"><img src="Images/gtalk.png" alt="Google Talk" title="Google Talk" name="Google Talk" width="100%" height="100%" border="0" id="Google Talk" /></a></div>
<div class="linkedin"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('LinkedIn','','Images/linkedin-logo-square.png',1)"><img src="Images/linkedin-logo.png" alt="LinkedIn" title="LinkedIn" name="LinkedIn" width="100%" height="100%" border="0" id="LinkedIn" /></a></div>
<div class="twitter"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Twitter','','Images/twitter-square.png',1)"><img src="Images/twitter.png" alt="Twitter" name="Twitter" title="Twitter" width="100%" height="100%" border="0" id="Twitter" /></a></div>
<div class="flickr"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Flickr','','Images/flickr-square.png',1)"><img src="Images/flickr.png" alt="Flickr" title="Flickr" name="Flickr" width="100%" height="100%" border="0" id="Flickr" /></a></div>
</div>
</div>
</body>
</html>
我的CSS：
/* Defaults / Desktop View */
html, body {
height: 100%;
}
#centeredcontent {
width: 480px;
height: 640px;
text-align: center;
border: 1px solid #000;
background-color: white;
color: #fff;
position: absolute;
left: 50%;
top: 50%;
margin-left: -240px;
margin-top: -320px;
}
h1 { color: #000000; }
h2 { color: #000000; }
h3 { color: #000000; }
h4 { color: #000000; }
@media only screen and (min-width:980px ) and (max-width:2880px) {
/*Large Desktop*/
#centeredcontent {
width: 800px;
height: 800px;
text-align: center;
border: 1px solid #000;
background-color: white;
color: #fff;
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -320px;
}
#blank {
width: 1px;
height: 1px;
text-align: center;
border: 0px solid #000;
background-color:#FFF
position: absolute;
left: 0px;
top: 0px;
}
#home {
width: 158px;
height: 158px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 84px;
top: 0px;
}
#me {
width: 158px;
height: 158px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 242px;
top: 0px;
}
#work {
width: 158px;
height: 158px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 400px;
top: 0px;
}
#contact {
width: 158px;
height: 158px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 558px;
top: 0px;
}
#home-work {
width: 158px;
height: 158px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 84px;
top: 0px;
}
#me-work {
width: 158px;
height: 158px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 242px;
top: 0px;
}
#work-work {
width: 158px;
height: 158px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 400px;
top: 0px;
}
#contact-work {
width: 158px;
height: 158px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 558px;
top: 0px;
}
div#box {
width: 500px;
height: 500px;
position: absolute;
left: 150px;
top: 160px;}
#thumbBox{ /*Outermost DIV for thumbnail viewer*/
position: absolute;
left: 0;
top: 0;
width: auto;
padding: 10px 10px 20px 10px;
border: 1px solid #F8F8F8;
-moz-box-shadow: 5px 5px 10px #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
background: #FFFFFF;
visibility: hidden;
z-index: 10;
cursor: hand;
cursor: pointer;
}
#thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */
font: bold 16px Tahoma;
letter-spacing: 5px;
line-height: 1.1em;
color: black;
padding: 5px 0;
text-align: right;
}
#thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/
position: absolute;
visibility: hidden;
border: 1px solid black;
background-color: #EFEFEF;
padding: 5px;
z-index: 5;
}
}
@media only screen and (min-width:651px ) and (max-width:979px) {
/*Small Desktop / Large Tablet View*/
#centeredcontent {
width: 650px;
height: 640px;
text-align: center;
border: 1px solid #000;
background-color: white;
color: #fff;
position: absolute;
left: 50%;
top: 50%;
margin-left: -325px;
margin-top: -320px;
}
#blank {
width: 1px;
height: 1px;
text-align: center;
border: 0px solid #000;
background-color:#FFF
position: absolute;
left: 0px;
top: 0px;
}
#home {
width: 158px;
height: 158px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 9px;
top: 0px;
}
#me {
width: 158px;
height: 158px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 167px;
top: 0px;
}
#work {
width: 158px;
height: 158px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 325px;
top: 0px;
}
#contact {
width: 158px;
height: 158px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 483px;
top: 0px;
}
#home-work {
width: 158px;
height: 158px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 9px;
top: 0px;
}
#me-work {
width: 158px;
height: 158px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 167px;
top: 0px;
}
#work-work {
width: 158px;
height: 158px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 325px;
top: 0px;
}
#contact-work {
width: 158px;
height: 158px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 483px;
top: 0px;
}
div#box {
width: 500px;
height: 500px;
position: absolute;
left: 75px;
top: 160px;}
#thumbBox{ /*Outermost DIV for thumbnail viewer*/
position: absolute;
left: 0;
top: 0;
width: auto;
padding: 10px 10px 20px 10px;
border: 1px solid #F8F8F8;
-moz-box-shadow: 5px 5px 10px #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
background: #FFFFFF;
visibility: hidden;
z-index: 10;
cursor: hand;
cursor: pointer;
}
#thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */
font: bold 16px Tahoma;
letter-spacing: 5px;
line-height: 1.1em;
color: black;
padding: 5px 0;
text-align: right;
}
#thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/
position: absolute;
visibility: hidden;
border: 1px solid black;
background-color: #EFEFEF;
padding: 5px;
z-index: 5;
}
}
@media only screen and (min-width:480px ) and (max-width:650px) {
/* Small Tablet View */
#centeredcontent {
width: 480px;
height: 640px;
text-align: center;
border: 1px solid #000;
background-color: white;
color: #fff;
position: absolute;
left: 50%;
top: 50%;
margin-left: -240px;
margin-top: -320px;
}
#blank {
width: 1px;
height: 1px;
text-align: center;
border: 0px solid #000;
background-color:#FFF
position: absolute;
left: 0px;
top: 0px;
}
#home {
width: 158px;
height: 158px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 82px;
top: 0px;
}
#me {
width: 158px;
height: 158px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 240px;
top: 0px;
}
#work {
width: 158px;
height: 158px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 82px;
top: 158px;
}
#contact {
width: 158px;
height: 158px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 240px;
top: 158px;
}
#home-work {
width: 120px;
height: 120px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 0px;
top: 0px;
}
#me-work {
width: 120px;
height: 120px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 120px;
top: 0px;
}
#work-work {
width: 120px;
height: 120px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 240px;
top: 0px;
}
#contact-work {
width: 120px;
height: 120px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 360px;
top: 0px;
}
div#box {
width: 480px;
height: 480px;
position: absolute;
left: 0px;
top: 130px;}
#thumbBox{ /*Outermost DIV for thumbnail viewer*/
position: absolute;
left: 0;
top: 0;
width: auto;
padding: 10px 10px 20px 10px;
border: 1px solid #F8F8F8;
-moz-box-shadow: 5px 5px 10px #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
background: #FFFFFF;
visibility: hidden;
z-index: 10;
cursor: hand;
cursor: pointer;
}
#thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */
font: bold 16px Tahoma;
letter-spacing: 5px;
line-height: 1.1em;
color: black;
padding: 5px 0;
text-align: right;
}
#thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/
position: absolute;
visibility: hidden;
border: 1px solid black;
background-color: #EFEFEF;
padding: 5px;
z-index: 5;
}
}
@media only screen and (max-width:479px) {
/* Smartphone view*/
#centeredcontent {
width: 320px;
height: 640px;
text-align: center;
border: 1px solid #000;
background-color: white;
color: #fff;
position: absolute;
left: 50%;
top: 50%;
margin-left: -160px;
margin-top: -320px;
}
#blank {
width: 1px;
height: 1px;
text-align: center;
border: 0px solid #000;
background-color:#FFF
position: absolute;
left: 0px;
top: 0px;
}
#home {
width: 140px;
height: 140px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 90px;
top: 20px;
}
#me {
width: 140px;
height: 140px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 90px;
top: 160px;
}
#work {
width: 140px;
height: 140px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 90px;
top: 300px;
}
#contact {
width: 140px;
height: 140px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 90px;
top: 440px;
}
#home-work {
width: 80px;
height: 80px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 0px;
top: 0px;
}
#me-work {
width: 80px;
height: 80px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 80px;
top: 0px;
}
#work-work {
width: 80px;
height: 80px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 160px;
top: 0px;
}
#contact-work {
width: 80px;
height: 80px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 240px;
top: 0px;
}
}
答案 0 :(得分：1)
你的问题在这里（剪辑到相关部分）：
#centeredcontent {
height: 640px;
position: absolute;
top: 50%;
margin-top: -320px;
}
iPhone屏幕历史上是320x480像素。当iPhone 4引入视网膜屏幕时，这两种方式都增加了一倍，达到了640x960，但为了防止这种情况，如果指定像素大小，这会使网站难以辨认，旧的分辨率得到维护，内容就会被炸毁。因此，iPhone 4 / 4S仍然认为自己是320x480浏览器。从那以后，Android浏览器在高分辨率屏幕上也做了同样的事情。
在这个480像素高的iPhone屏幕上，您可以将内容放置在向下240像素（top:50%）和向上320像素（margin-top:-320px）的位置。因此，您将内容移动超出浏览器的顶部边缘80个像素，由于地址栏也占用空间，可能会更多。
底线：不要垂直居中内容，如果没有确保它适合，这是一个坏主意。您对小屏幕的最终媒体查询不应试图集中，而只是让智能手机浏览器缩放完成其工作。