max-widthの注意点 - iPad
max-widthのススメからの続きです。
iPadの症状
max-widthで760pxを指定し、iPadで見た時の画面（概略）。
理由は不明だが、かなりひどいことになっている。
iPadへの対策
メインのスタイルシート（main.css）には次のように書かれている。
html
{
background-image: url("images/oldpaper.jpg")
}
body
{
max-width : 760px;
}
iPad用のスタイルシート（ipad.css）を作り、次のように書いておく。
html
{
}
body
{
max-width : none;
width : 760px;
height : 1024px;
overflow : visible;
border : none;
background-color:transparent;
background-image:none:
}
iPadは奇っ怪な振る舞いをするので、背景画像もボーダーラインも取っ払って、シンプルにしておく作戦がよさそうである。
iPadのみにこのスタイルシートを読ませるには、JavaScriptを使った。
javascript1.js
を作り、次のように書いておく。
if(navigator.platform.indexOf("iPad") != -1)
{
cssSrcipad = "<link rel='stylesheet' type='text/css' href='style/ipad.css'>";
document.write(cssSrcipad);
}
そして、このJavaScriptへのリンクをヘッダ内（main.cssへのリンクより後方）に張っておけばいいわけである。例えば次のように。
<script type="text/javascript" src="javascript1.js">
</script>
iPad関連ページ
- WebサイトのiPad対応化 … iPad縦置きの罠
関連ページ（max-width関連）
- max-widthのススメ
- max-widthの注意点 - IE6 … max-widthが無効
- max-widthの注意点 - iPad … 表示が崩れる（今見ているページ）
[2011-09]
