HEAD タグで次のように宣言しています。
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" media="all and (orientation:landscape}" href="css/landscape.css">
<link rel="stylesheet" media="all and (orientation:portrait}" href="css/portrait.css">
iPad の firebug lite を見ると、portrait.css と landscape.css の両方のスタイルが適用されていることがわかります。スタイルが競合していて、ページが乱れています。強制的に Portrait.css を読み込むと (横方向の線を削除して)、縦方向モードは正常に動作します。（縦線を削除して）横向きを強制的に読み込むと、横向きは正常に機能します。私は、portrait.css を縦にのみ適用し、landscape.css を横にのみ適用したいと考えています。