1

私のシンプルなサイトを見ると、ブラウザではうまく機能しますが、iPhoneではサイトの下部のリボンが横向きで失われます。

横向きのときにページの高さが正しく調整されないのはなぜですか？ 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>
4

2 に答える 2

2

それは実際には完全に消えているわけではありません。ポートレートからランドスケープに回転した後、リフレッシュを押します。それは見えました（それの約8ピクセル）。

min-height:320px垂直リボンのCSSに追加します。320または使用できる別の値。

于 2012-12-04T17:57:44.503 に答える
0

私は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-04T19:46:47.533 に答える