0

我一直在为网页开发一种反应式设计。在桌面上查看时，整个页面都会显示（浏览器窗口缩小到手机大小），但在 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;
}

}
4

1 回答 1

1

您的问题在这里（剪辑到相关部分）：

#centeredcontent {
    height: 640px;
    position: absolute;
    top: 50%;
    margin-top: -320px;
}

iPhone 屏幕历来是 320x480 像素。当 iPhone 4 引入 Retina 屏幕时，这两种方式都翻了一番，达到 640x960，但为了防止网站在指定像素大小时变得不可读，保留了旧的分辨率，内容只是被放大了。因此，iPhone 4/4S 仍然认为自己是 320x480 浏览器。Android 浏览器在高分辨率屏幕上也做了同样的事情。

在这个 480 像素高的 iPhone 屏幕上，您将内容定位在下 240 像素 ( top:50%) 和上 320 像素 ( margin-top:-320px) 处。因此，您将内容移动到浏览器顶部边缘之外的 80 像素处，由于地址栏也占用了空间，因此可能会多一点。

底线：不要垂直居中内容，如果不确保它适合，这是一个坏主意。您对小屏幕的最终媒体查询不应尝试居中，而应让智能手机浏览器缩放完成其工作。

于 2013-05-14T22:25:10.117 回答