iPhone Safari 가로 방향 CSS 문제

내 간단한 사이트를 살펴보면 브라우저에서는 훌륭하게 작동하지만 아이폰에서는 아래쪽 리본이 가로 방향으로 사라집니다.iPhone Safari 가로 방향 CSS 문제

가로 모드에서 페이지의 높이를 올바르게 조정하지 않는 이유는 무엇입니까? http://mtindustrialservicerequest.com/KenHolidayCard/holidayCardDemo/EmployeeCard2.html

HTML :

<!DOCTYPE html> 
<html lang="en"> 
<HEAD> 
<meta charset="utf-8"> 
</HEAD> 
<BODY style="text-align: center; background-color:#e4e4e4; background-image:url(snowflakeBackground500x500.png); margin:0; padding:0;"> 
<div style="position: absolute; height: 100%; width: 100%; background-image:url(ribbon_Bottom2.png); background-repeat: repeat-y; background-position: center center;"> 
<div style="position: relative; width: 100%; height:325px; overflow: visible; top: 50%; margin-top: -170px; background-image:url(ribbon_Horizontal2.png); background-position: center center;"> 
<iframe width="650" height="325" src="http://www.youtube.com/embed/bFs89lAL7dE?&autoplay=1&rel=0&fs=0&theme=light&showinfo=0&controls=0&autohide=1&color=white" frameborder="0" allowfullscreen></iframe> 
</div> 
</div> 
</BODY> 
</HTML>

출처

2012-12-04 JRulle

중간에 가로줄과 비디오가있는 위쪽 및 아래쪽 리본이 서로 겹쳐서 3 개의 div가 쌓여서 해결되었습니다. 상단/하단 높이가 50 %로 하단/상단 여백이 중간에있는 325px 비디오를 보정합니다. 아래를 참조하십시오.

<BODY style="text-align: center; background-color:#e4e4e4; background-image:url(snowflakeBackground500x500.png); margin:0; padding:0;"> 
<div id="div1" style="position: absolute; height: 100%; width: 100%;"> 
<div id="div2" style="position: relative; height: 50%; width: 100%; margin-bottom:-170px; background-image:url(ribbon_Bottom2.png); background-repeat: repeat-y; background-position: center center;"></div> 
<div style="position: relative; width: 100%; height:325px; overflow: visible; background-image:url(ribbon_Horizontal2.png); background-position: center center;"> 
<iframe class="shadow" width="650" height="325" src="http://www.youtube.com/embed/bFs89lAL7dE?&autoplay=1&rel=0&fs=0&theme=light&showinfo=0&controls=0&autohide=1&color=white" frameborder="0" allowfullscreen></iframe> 
</div> 
<div id="div3" style="position: relative; height: 50%; width: 100%; margin-bottom: 170px; background-image:url(ribbon_Bottom2.png); background-repeat: repeat-y; background-position: center center;"></div> 
</div> 
</BODY> 
</HTML>

출처

2012-12-04 19:46:47 JRulle

그것은 실제로 완전히 사라지고 아닙니다. 초상화에서 풍경으로 회전 한 후, 나는 새로 고침을했다. 그것은 보였습니다 (잘 약 8 픽셀).

세로 리본의 CSS에 min-height:320px을 추가합니다. 320 또는 다른 값으로 작업 할 수 있습니다.

출처

2012-12-04 17:57:44 Dawson

예상대로 작동하지 않았습니다. 가로 화면을 위에서 아래로 채우기 위해 값을 850px로 설정해야했습니다 (이유는 확실하지 않습니다). 850 픽셀은 웹 브라우저에서 사이트를 볼 때 문제를 만듭니다. – JRulle

미디어 쿼리를 사용하여 모바일 문제를 해결할 수 있습니다. @media 전용 화면 (최소 너비 : 480px) 및 (최대 너비 : 767px) { \t .vert 리본 {높이 : XX; 최소 높이 : XX ...} } – Dawson

iPhone Safari 가로 방향 CSS 문제

답변

관련 문제