【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は以下に。
目次
- 最初に調べたエントリー
- linkタグのmedia属性で判別する方法
- landscapeモードやportraitモードで判別する方法
- 結局javascriptで振り分ける
- オマケ：ズーム倍率を固定する。←iPhoneでズームが効かないのを修正
- 結局iPad専用ページに書いておくべき事は
最初に調べたときに参考にしたエントリー
iPad発売前に！iPad向けWebサイト制作についてのおさらい
iPadのSafari用HTMLで次のように書いておくと縦と横でCSSを切り替えられる
iPadだけにCSSを適用する方法
どの記事にもlinkのmediaで切り替える方法が書いてあります。
linkタグのmedia属性で判別する方法
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />max-device-widthを指定することでiPhoneの場合はiPhoneだけに適用出来ました。 ただiPadはこれじゃダメ。
なぜこれだけではダメか
この記述だと1024pxのモニタで表示すると適用される。
セカンダリのモニタが1024px(90度回転して使ってますが。)なので
サンプル１をchromeやfirefoxで開くとiPad.cssが適用されてしまっている。
landscapeモードやportraitモードで判別する方法
<link rel="stylesheet" media="all and (orientation:landscape)" href="./css/landscape.css" type="text/css" /> <link rel="stylesheet" media="all and (orientation:portrait)" href="./css/portrait.css" type="text/css" />mediaを使ってlandscapeやportraitを指定することで縦、横でcssを切り替えることが出来るのですが・・・
縦と横ってiPad,iPhoneだけのものじゃない。
サンプル１のSampleの部分にlandscape.cssとportrait.cssを使っていますが
chromeやfirefoxで開き、ウィンドウサイズを変えている適用される。
結局javascriptで振り分ける
冒頭で書いたとおり、UserAgentを判別してjsで後からcssを適用するしかないのでjsを書いた。サンプル
通常の関数版
htmlの記述 第1引数：iPadのみ共通で読ませるCSS 第2引数：横にしたときに適用したいCSS 第3引数：縦にしたときに適用したいCSS
<head>
<script type="text/javascript" src="./js/ipad.js"></script></p>
<script type="text/javascript">
//< ![CDATA[
iPadLoadStyle("./css/ipad2.css","./css/landscape.css","./css/portrait.css");
//]]>
</script>
<p></head>
ipad.jsの記述
function iPadLoadStyle(){
window.iPad = /iPad/.test(navigator.userAgent);
if(iPad){
var args = arguments,
d = document,
head = d.getElementsByTagName('head'),
linktag = function(h,m){
var tag = d.createElement("link");
tag.href = h;
tag.media = m;
tag.type = "text/css";
tag.rel = "stylesheet";
return tag;
};
//common
if(args[0]) head.item(0).appendChild(linktag(args[0],"only screen and (max-device-width: 1024px)"));
//landscape
if(args[1]) head.item(0).appendChild(linktag(args[1],"all and (orientation:landscape)"));
//portrait
if(args[2]) head.item(0).appendChild(linktag(args[2],"all and (orientation:portrait)"));
}
};
jQueryプラグイン版
htmlの記述 common：iPadのみ共通で読ませるCSS(デフォルトはfalse) landscape：横にしたときに適用したいCSS(デフォルトはfalse) portrait：縦にしたときに適用したいCSS(デフォルトはfalse)
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
<script type="text/javascript" src="./js/jquery.ipadloadstyle.js"></script></p>
<script type="text/javascript">
//< ![CDATA[
$(function(){
$.iPadLoadStyle({
common: "./css/ipad2.css",
landscape: "./css/landscape.css",
portrait: "./css/portrait.css"
});
});
//]]>
</script>
<p></head>
jquery.ipadloadstyle.jsの記述
$.extend({
iPadLoadStyle: function(opt) {
var opt = jQuery.extend( {
common: false,
landscape: false,
portrait: false
}, opt),
iPad = /iPad/.test(navigator.userAgent),
d = document,
$head = $("head"),
linktag = function(h,m){
var tag = d.createElement("link");
tag.href = h;
tag.media = m;
tag.type = "text/css";
tag.rel = "stylesheet";
return tag;
};
if(iPad){
//common
if(opt.common) $head.append(linktag(opt.common,"only screen and (max-device-width: 1024px)"));
//landscape
if(opt.landscape) $head.append(linktag(opt.landscape,"all and (orientation:landscape)"));
//portrait
if(opt.portrait) $head.append(linktag(opt.portrait,"all and (orientation:portrait)"));
}
return this;
}
});
オマケ：ズーム倍率を固定する。
iPad用にページを作ったのにタップしたらズームしちゃった・・・ なんてことにならないように以下の記述を書いておく。
<meta name="viewport" content="width=1024, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta name="viewport" content="width=768, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>これでズームされないね！
なんで2つも書かないといけないのか？
iPadをお持ちであれば metaが2つ書いてあるサンプルを見て、iPadを回転してみてください。 そのあとに metaを1つにしたサンプルを見て回転させてください。 縦にした時に768ではなく1024が適用されて横にスクロールできると思います。 なので2つ書いておく。
結局iPad専用ページに書いておくべき事は
以下のようになります。ズーム固定がいらなければmeta消せば良いだけですが。 (iPhone用に320も書く)
<head>
<meta name="viewport" content="width=1024, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="viewport" content="width=768, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
<script type="text/javascript" src="./js/ipad.js"></script></p>
<script type="text/javascript">
//< ![CDATA[
iPadLoadStyle("./css/ipad2.css","./css/landscape.css","./css/portrait.css");
//]]>
</script>
<p></head>
どれだけiPadに対応したウェブコンテンツは現れるのか…
Tags: CSS, iPad, javascript
17. 5月 2010 at 11:41
iPad発売前に！iPad向けWebサイト制作についてのおさらい
iPadの予約が順調すぎて、受付を一時停止するほどになっています。「アップル、Apple Store各直営店での「iPad」予約販売を停止」マイコミジャーナルWebクリエイターの方は今のうちにiPad向…
17. 5月 2010 at 11:42
なるほど。そうなんですね。勉強になります。
17. 5月 2010 at 13:53
[...] 【CSS】iPadだけにCSSを適用する方法:：げことじ。：日常からWEBまで： [...]
17. 5月 2010 at 18:20
[...] 前回の【CSS】iPadだけにCSSを適用する方法に引き続きiPadで検証中。 [...]
18. 5月 2010 at 07:09
[...] 【CSS】iPadだけにCSSを適用する方法:</gecko>：げことじ。：日常からWEBまで： (tags: ipad css) [...]
18. 5月 2010 at 11:00
コメントありがとうございます。 解像度は普通のPCと大差ないのでiPad用のページを作るっていうことは少ないかもしれませんが お役に立てれば幸いです。 もし実機が届いて検証できるようであれば検証してみてください。
11. 6月 2010 at 11:59
link relで対応できているものと勘違いしていたので、ここのJavaScript大変参考になりました。 あとは、iPad用CSS側で定義するhtml5というかCSS3って言うんですか、それを勉強しなくちゃ！
25. 6月 2010 at 09:35
参考にさせていただいております。 こちらを使ってvideoのサイズをportrait、landscapeで変えました。 ですがその上にz-indexを上にしたものを配置した状態で回転すると、二度目以降、 ビデオの上に載せたものが下に行ってしまいまい、また悩んでます。
27. 7月 2010 at 16:25
[...] も含めて下記のサイトにありました。 http://gecko.hp2.jp/2010/05/17/%E3%80%90css%E3%80%91ipad%E3%81%A0%E3%81%91%E3%81%ABcss%E3%82%92%E9%81%A9%E7%94%A8%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/ カテゴリー: 未分類 タグ: コ [...]
21. 9月 2010 at 14:42
[...] 【CSS】iPadだけにCSSを適用する方法 [...]