스마트 폰에서 볼 때 iPhone 상단에 웹 페이지가 표시되지 않습니다.

웹 페이지에 대한 반응적인 디자인을 개발했습니다. 책상 위에서 볼 때 전체 페이지가 표시되고 (브라우저 창은 전화 크기로 축소됨) iPhone에서 볼 때 (Android에서도 마찬가지 임) 상위 100 인치 픽셀이 페이지 상단에서 벗어납니다. 누구든지이 문제를 겪었습니까? 스마트 폰에서 볼 때 iPhone 상단에 웹 페이지가 표시되지 않습니다.

내 코드와 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:[email protected]" 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; 
} 

}

출처

2013-05-14 Darren Cartwright

Google에서 귀하의 웹 사이트를 보여줌으로써 실제 상황을 볼 수 있습니까? – npage

Dreamweaver WYSIWYG 이전 편집을 사용하여 최신 플랫폼에서 작동해야하는 사이트를 만들지 마십시오. 거기에있는 모든 'MM_'헛소리는 불필요하고 잠재적으로 골치 아픈 레거시 혼란에 빠지며 이전 버전의 Dreamweaver (매크로 미디어 인 경우 MM_ 접두사)에서 자동으로 생성됩니다. –

귀하의 문제가 여기에있다 (관련 부분에 클립) :

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

아이폰 화면 역사적으로 320x480 픽셀입니다. 망막 스크린이 아이폰 4에 의해 소개되었을 때, 이것은 두 가지 방법으로 640x960으로 두 배가되었지만 픽셀 크기를 지정하면 작은 사이트를 읽을 수 없게 만드는 것을 막기 위해 오래된 해상도가 유지되고 내용이 날아 갔다. 따라서 iPhone 4/4S는 여전히 320x480 브라우저로 간주됩니다. 안드로이드 브라우저는 고해상도 스크린에서도 마찬가지입니다.

이 480 픽셀 고 아이폰 화면에서 240 픽셀 아래로 (top:50%) 및 최대 320 픽셀 (margin-top:-320px)의 콘텐츠를 배치합니다. 따라서 콘텐츠를 브라우저의 상단 가장자리 너머로 80 픽셀 이동합니다. 주소 막대로 인해 공간이 너무 많이 차지할 수 있습니다.

결론 : 콘텐츠를 수직으로 가운데 맞추지 마십시오. 적합하지 않다는 것은 좋지 않습니다. 작은 화면에 대한 최종 미디어 쿼리는 중심을 잡아서는 안되며 스마트 폰 브라우저의 확장 성을 그대로 유지해야합니다.

출처

2013-05-14 22:25:10

감사합니다 Niels, 큰 도움이 될 것입니다. –

스마트 폰에서 볼 때 iPhone 상단에 웹 페이지가 표시되지 않습니다.

답변

관련 문제