Home > CSS | HTML | WEBに関すること | javascript > 【CSS】iPadだけにCSSを適用する方法

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

2010-05-17 (月) 11:32
CSS | HTML | WEBに関すること | javascript
CSS | iPad | javascript

結論から言うと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>
  <script type="text/javascript">
    //< ![CDATA[
      iPadLoadStyle("./css/ipad2.css","./css/landscape.css","./css/portrait.css");
    //]]>
  </script>
</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>
  <script type="text/javascript">
    //< ![CDATA[
    $(function(){
      $.iPadLoadStyle({
      common: "./css/ipad2.css",
      landscape: "./css/landscape.css",
      portrait: "./css/portrait.css"
      });
    });
    //]]>
  </script>
</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>
  <script type="text/javascript">
    //< ![CDATA[
      iPadLoadStyle("./css/ipad2.css","./css/landscape.css","./css/portrait.css");
    //]]>
  </script>
</head>

どれだけiPadに対応したウェブコンテンツは現れるのか…

Comments:5

boss 10-05-17 (月) 11:42: なるほど。そうなんですね。勉強になります。
gecko 10-05-18 (火) 11:00: コメントありがとうございます。
解像度は普通のPCと大差ないのでiPad用のページを作るっていうことは少ないかもしれませんが
お役に立てれば幸いです。
もし実機が届いて検証できるようであれば検証してみてください。
berghilo 10-06-11 (金) 11:59: link relで対応できているものと勘違いしていたので、ここのJavaScript大変参考になりました。
あとは、iPad用CSS側で定義するhtml5というかCSS3って言うんですか、それを勉強しなくちゃ！
kazuya 10-06-25 (金) 9:35: 参考にさせていただいております。
こちらを使ってvideoのサイズをportrait、landscapeで変えました。
ですがその上にz-indexを上にしたものを配置した状態で回転すると、二度目以降、
ビデオの上に載せたものが下に行ってしまいまい、また悩んでます。
匿名 10-08-04 (水) 11:38: 4MediaiPad MaxはApple iPadファンたちに、iPadファイルをPC 、iTunesにバックアップする複数の方法を提供しています。そして、この4Media iPad Max を使えば、iTunesがなくても構わないで、PCファイルをiPadに転送するのも実現できます。この上、4Media iPad MaxフリーソフトはCD/DVDをリッピングする機能、様々の動画音声及びISO、IFOイメージをiPad適用の形式に変換する機能を持っています。さらに、M2TS、MTS、AVI、MP4、MPEG-4、MPEG、WMV、DAT、TS、MPV、NSV、M4V、MOV、QT、H.261、H.264、MP3、AAC、WMA、AAC、AIF、AIFF、AC3など数多くの形式をサポートしています。

Trackbacks:5

Trackback URL for this entry: 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/trackback/
Listed below are links to weblogs that reference: 【CSS】iPadだけにCSSを適用する方法 from </gecko>：げことじ。：日常からWEBまで：

trackback from tuglog! 10-05-17 (月) 11:41

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

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

pingback from 【CSS】iPadだけにCSSを適用する方法:：げことじ。：日常からWEBまで： | とっても！　ちゅどん（雑記帳） 10-05-17 (月) 13:53

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

pingback from 【iPad】ホーム画面に追加した時の画像:</gecko>：げことじ。：日常からWEBまで： 10-05-17 (月) 18:20

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

pingback from links for 2010-05-17 « 個人的な雑記 10-05-18 (火) 7:09

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

pingback from MEC-Web Design Info » iPadだけにCSSを適用する方法 10-07-27 (火) 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/ カテゴリー: 未分類タグ: コ [...]

Home > CSS | HTML | WEBに関すること | javascript > 【CSS】iPadだけにCSSを適用する方法

Pages

はじめまして。

Recent Entries

Categories

Archives

Tag Cloud

Search

Feeds

Ads

Link

バナー
自分用メモ

Meta

Return to page top