iPad

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

background-image: url(image/img1.jpg) , url(image/img2.jpg) ;
background-position: top center , center 500px ;

みたいにcss3の背景画像複数指定を使って対応した。

結論から言うと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は以下に。

 

Continue reading