android - iPhone をスマートフォンで表示すると Web ページのトップが表示されない

Question

Web ページのリアクティブデザインを開発しています。デスクトップで表示するとページ全体が表示されますが (ブラウザーウィンドウが電話のサイズに縮小されます)、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;
}

}

score 1 · Accepted Answer

あなたの問題はここにあります（関連する部分にクリップされています）：

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

iPhone の画面は歴史的に 320x480 ピクセルです。Retina スクリーンが iPhone 4 で導入されたとき、これは 640x960 に両方の方法で 2 倍になりましたが、ピクセルサイズを指定した場合にサイトが読みにくくなるのを防ぐために、古い解像度が維持され、コンテンツが拡大されました。したがって、iPhone 4/4S は依然として 320x480 ブラウザーと見なされます。それ以来、Android ブラウザーは高解像度の画面で同じことを行ってきました。

この 480 ピクセルの高さの iPhone 画面では、コンテンツを下に 240 ピクセル ( top:50%)、上に 320 ピクセル ( margin-top:-320px) 配置しています。したがって、ブラウザの上端を超えてコンテンツを 80 ピクセル移動しています。これは、アドレスバーもスペースを占有しているため、もう少し大きいかもしれません。

結論: コンテンツを垂直方向に中央揃えにしないでください。収まらないことを保証しないのは悪い考えです。小さな画面の最終的なメディアクエリは、中央に配置しようとせず、スマートフォンブラウザーのスケーリングに任せてください。

android - iPhone をスマートフォンで表示すると Web ページのトップが表示されない

1 に答える 1

Related

Reference