結論から言うとjavascriptでUserAgentを参照して振り分けるしかない。
linkやcss内の@mediaでどうにかなるもんだと思ってましたが。
1
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />
どうやら↑では”iPadオンリー”は無理です。 結局UserAgentを見るしかない。
1
var iPad = /iPad/.test(navigator.userAgent);
2
if(iPad){
3
//iPadだけに適用させたい記述
4
}
長くなるので無理な理由、検証、iPadだけにcssを適用させるjsは以下に。
目次
最初に調べたエントリー
linkタグのmedia属性で判別する方法
landscapeモードやportraitモードで判別する方法
結局javascriptで振り分ける
オマケ：ズーム倍率を固定する。←iPhoneでズームが効かないのを修正
結局iPad専用ページに書いておくべき事は
最初に調べたときに参考にしたエントリー
iPad発売前に！iPad向けWebサイト制作についてのおさらい iPadのSafari用HTMLで次のように書いておくと縦と横でCSSを切り替えられる iPadだけにCSSを適用する方法
どの記事にもlinkのmediaで切り替える方法が書いてあります。
linkタグのmedia属性で判別する方法
1
<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モードで判別する方法
1
<link rel="stylesheet" media="all and (orientation:landscape)" href="./css/landscape.css" type="text/css" />
2
<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
01
<head>
02
<script type="text/javascript" src="./js/ipad.js"></script>
03
04
<script type="text/javascript">
05
//< ![CDATA[
06
iPadLoadStyle("./css/ipad2.css","./css/landscape.css","./css/portrait.css");
07
//]]>
08
</script>
09
10
</head>
ipad.jsの記述
01
function iPadLoadStyle(){
02
window.iPad = /iPad/.test(navigator.userAgent);
03
if(iPad){
04
var args = arguments,
05
d = document,
06
head = d.getElementsByTagName('head'),
07
linktag = function(h,m){
08
var tag = d.createElement("link");
09
tag.href = h;
10
tag.media = m;
11
tag.type = "text/css";
12
tag.rel = "stylesheet";
13
return tag;
14
};
15
//common
16
if(args[0]) head.item(0).appendChild(linktag(args[0],"only screen and (max-device-width: 1024px)"));
17
//landscape
18
if(args[1]) head.item(0).appendChild(linktag(args[1],"all and (orientation:landscape)"));
19
//portrait
20
if(args[2]) head.item(0).appendChild(linktag(args[2],"all and (orientation:portrait)"));
21
}
22
};
jQueryプラグイン版
htmlの記述 common：iPadのみ共通で読ませるCSS(デフォルトはfalse) landscape：横にしたときに適用したいCSS(デフォルトはfalse) portrait：縦にしたときに適用したいCSS(デフォルトはfalse)
01
<head>
02
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
03
<script type="text/javascript" src="./js/jquery.ipadloadstyle.js"></script>
04
05
<script type="text/javascript">
06
//< ![CDATA[
07
$(function(){
08
$.iPadLoadStyle({
09
common: "./css/ipad2.css",
10
landscape: "./css/landscape.css",
11
portrait: "./css/portrait.css"
12
});
13
});
14
//]]>
15
</script>
16
17
</head>
jquery.ipadloadstyle.jsの記述
01
$.extend({
02
iPadLoadStyle: function(opt) {
03
var opt = jQuery.extend( {
04
common: false,
05
landscape: false,
06
portrait: false
07
}, opt),
08
iPad = /iPad/.test(navigator.userAgent),
09
d = document,
10
$head = $("head"),
11
linktag = function(h,m){
12
var tag = d.createElement("link");
13
tag.href = h;
14
tag.media = m;
15
tag.type = "text/css";
16
tag.rel = "stylesheet";
17
return tag;
18
};
19
if(iPad){
20
//common
21
if(opt.common) $head.append(linktag(opt.common,"only screen and (max-device-width: 1024px)"));
22
//landscape
23
if(opt.landscape) $head.append(linktag(opt.landscape,"all and (orientation:landscape)"));
24
//portrait
25
if(opt.portrait) $head.append(linktag(opt.portrait,"all and (orientation:portrait)"));
26
}
27
return this;
28
}
29
});
オマケ：ズーム倍率を固定する。
iPad用にページを作ったのにタップしたらズームしちゃった・・・ なんてことにならないように以下の記述を書いておく。
1
<meta name="viewport" content="width=1024, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
2
<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も書く)
プレインテキスト印刷?
01
<head>
02
<meta name="viewport" content="width=1024, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
03
<meta name="viewport" content="width=768, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
04
<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
05
<script type="text/javascript" src="./js/ipad.js"></script>
06
07
<script type="text/javascript">
08
//< ![CDATA[
09
iPadLoadStyle("./css/ipad2.css","./css/landscape.css","./css/portrait.css");
10
//]]>
11
</script>
12
13
</head>
