【iPhone/iPad】backgroundで大きすぎる画像は表示されない

1420×1410の大きすぎる画像をhtmlのbackgroundに指定したらiPhone/iPadで表示されなかった。 たぶんこのエントリーにある通り制限を超えてるのかなぁ。 なので画像を分割して

background-image: url(image/img1.jpg) , url(image/img2.jpg) ;
background-position: top center , center 500px ;
みたいにcss3の背景画像複数指定を使って対応した。

【CSS】iPadだけにCSSを適用する方法

結論から言うとjavascriptでUserAgentを参照して振り分けるしかない。

linkやcss内の@mediaでどうにかなるもんだと思ってましたが。

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />
どうやら↑では”iPadオンリー”は無理です。 結局UserAgentを見るしかない。
var iPad = /iPad/.test(navigator.userAgent);
if(iPad){
//iPadだけに適用させたい記述
}

  長くなるので無理な理由、検証、iPadだけにcssを適用させるjsは以下に。
 
Den ganzen Beitrag lesen…