携帯電話向けCSSのPCでの確認方法。

携帯電話は画面の幅が狭いので、スタイルもPCのそれとは異なるものになる可能性があります。

このため、携帯電話専用のCSSを書いても、確認が難しいかも知れません。

そこで、PCブラウザで携帯電話向けCSSを確認する為の一番簡単な方法を考えてみました。

実際の手順。

  1. まず、以下のCSSファイルを作って保存します。 
    html {
		    text-align: center;
		    }

		body {
		    width: 12em;
		    border: 1px solid #000;
		    margin: 1em auto;
		    text-align: left;
		    }
  2. 携帯電話向けのHTML文書のヘッダの最後(</head>タグ直前)に、以下の<link>要素を挿入します。 
    <link rel="stylesheet" media="screen, projetion " type="text/css" href="../先程作ったCSSのURI" />
    • この場合、携帯電話向けCSSを読込む<link>要素のmedia属性は「media="handheld, tty, screen, projection "」としておきます。
  3. PCで当該リソースを閲覧して見ましょう。横幅が携帯電話に近い感じに見える筈です。

つまり、PCで見る場合は横幅を12文字程度に狭めて見てみようと言う訳です。

  • この方法はCSSファイルの定義内容に依っては巧く行かないかも知れません。特に<html>要素セレクタや<body>要素セレクタにおいて、上記のプロパティを設定している場合は巧く行かないでしょう。
  • <html>要素セレクタの定義と<body>要素セレクタでのtext-alignプロパティの定義は、ウィンドウズ版インターネットエクスプローラでのみ必要になります。依ってもじらやオペラで確認する場合はこれらの定義を削除しても構いません。
  • このCSSを全リソースでリンクするようにすれば、PCでも携帯電話に近いレイアウトで閲覧が出来るようになります。特に携帯電話版をPC兼用として公開される方には最適でしょう。

しらぎくのウェブサイト作成入門サイトマップ