このページをクリップ


    当サイトは以前までならCSSの外部ファイルへのリンクの指定の場合、mediaの部分はmedia=allという設定でした。

    つまりどんなマシンで見ようとも同じCSSで見せるという形になっていました。

    実際のソースの書き方

    今回iPod touch,iPhone専用にCSSファイルを作成して、iPod touch,iPhoneにのみそのCSSファイルを見せるために、以下のソースで対応しています。


    <link href="./c/ipodtouch.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" />
    <link href="./c/base.css" rel="stylesheet" type="text/css" media="screen and (min-device-width: 481px)" />
    <!--[if IE]>
    <link href="./c/base.css" rel="stylesheet" type="text/css" />
    <![endif]-->



    一番最初の media="only screen and (max-device-width: 480px)"でiPod touch,iPhone専用の外部CSSファイルを参照させています。(画面表示幅が480px以下の場合には・・・という設定)

    画面表示が481pxより大きい場合は2番目の外部CSSファイルを参照させています。つまり通常のパソコン関連に参照させるCSSです。

    本来であれば2番目までの外部CSSファイルへのリンク設定で事足りるのですが、このCSSのmediaクエリはIEは対応していないようで最後の


    <!--[if IE]>・・・<![endif]-->


    の記述が必要となってきてしまいました。

    • サイト
    • facebook
    • twitter

    PCからタブレット、スマホまで対応いたしました。ガラケーもとりあえず対応しております。

    Macに要求するものはどれ?


    * (1票)

    * (1票)

    * (票)

    * (票)

    * (票)