【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は以下に。
 

目次

最初に調べたときに参考にしたエントリー

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度回転して使ってますが。)なので サンプル1を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だけのものじゃない。

サンプル1の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: , ,

 
 
 

11 Responses to “【CSS】iPadだけにCSSを適用する方法”

  1. Gravatar of tuglog! tuglog!
    17. 5月 2010 at 11:41

    iPad発売前に!iPad向けWebサイト制作についてのおさらい

    iPadの予約が順調すぎて、受付を一時停止するほどになっています。「アップル、Apple Store各直営店での「iPad」予約販売を停止」マイコミジャーナルWebクリエイターの方は今のうちにiPad向…

  2. Gravatar of boss boss
    17. 5月 2010 at 11:42

    なるほど。そうなんですね。勉強になります。

  3. Gravatar of 【CSS】iPadだけにCSSを適用する方法::げことじ。:日常からWEBまで: | とっても! ちゅどん(雑記帳) 【CSS】iPadだけにCSSを適用する方法::げことじ。:日常からWEBまで: | とっても! ちゅどん(雑記帳)
    17. 5月 2010 at 13:53

    [...] 【CSS】iPadだけにCSSを適用する方法::げことじ。:日常からWEBまで: [...]

  4. Gravatar of 【iPad】ホーム画面に追加した時の画像:</gecko>:げことじ。:日常からWEBまで: 【iPad】ホーム画面に追加した時の画像:</gecko>:げことじ。:日常からWEBまで:
    17. 5月 2010 at 18:20

    [...] 前回の【CSS】iPadだけにCSSを適用する方法に引き続きiPadで検証中。 [...]

  5. Gravatar of links for 2010-05-17 « 個人的な雑記 links for 2010-05-17 « 個人的な雑記
    18. 5月 2010 at 07:09

    [...] 【CSS】iPadだけにCSSを適用する方法:</gecko>:げことじ。:日常からWEBまで: (tags: ipad css) [...]

  6. Gravatar of gecko gecko
    18. 5月 2010 at 11:00

    コメントありがとうございます。 解像度は普通のPCと大差ないのでiPad用のページを作るっていうことは少ないかもしれませんが お役に立てれば幸いです。 もし実機が届いて検証できるようであれば検証してみてください。

  7. Gravatar of berghilo berghilo
    11. 6月 2010 at 11:59

    link relで対応できているものと勘違いしていたので、ここのJavaScript大変参考になりました。 あとは、iPad用CSS側で定義するhtml5というかCSS3って言うんですか、それを勉強しなくちゃ!

  8. Gravatar of kazuya kazuya
    25. 6月 2010 at 09:35

    参考にさせていただいております。 こちらを使ってvideoのサイズをportrait、landscapeで変えました。 ですがその上にz-indexを上にしたものを配置した状態で回転すると、二度目以降、 ビデオの上に載せたものが下に行ってしまいまい、また悩んでます。

  9. Gravatar of MEC-Web Design Info » iPadだけにCSSを適用する方法 MEC-Web Design Info » iPadだけにCSSを適用する方法
    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/ カテゴリー: 未分類 タグ: コ [...]

  10. Gravatar of Etude du WEB » iPad Etude du WEB » iPad
    21. 9月 2010 at 14:42

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

  11. Gravatar of 大熊屋 大熊屋
    25. 6月 2012 at 12:09

    Media Queriesだけではうまくいかなくて困ってたんですが解決しました。 頑張って下さい~。

コメントをどうぞ