携帯サイトのDOCTYPE宣言、切り替え(PHPをSSIにて利用)に引き続き、各キャリアごとに共通して全体の文字サイズを1サイズ小さくし合わせる、PHPを紹介しますので、SSIは必須ですが利用してみてください。
XHTMLベースの紹介になります。
背景:docomoとSoftBankは「font-size:small;」で1サイズ小さくなりますが、auの場合さらに1サイズ小さくしなくてはならない。指定は「font-size:x-small;」になります。
SSIをHTMLで読み出す場合、.htaccess等に
以下を追加し、PHPと同じディレクトリに置きます。
AddHandler server-parsed html
AddType application/xhtml+xml .html
AddType application/xhtml+xml .xhtm .xhtml
ユーザーエージェントの切り替え方法は、
携帯ホームページを作ろう! -ちょっと詳しいモバイルサイトの作り方-を参考にしています。
■こちらをそのままコピーするか、
以下ファイルをダウンロードするかになります。
fontsize.txt[右クリック・ダウンロード]
(拡張子をphpに変更してください。)
完全フリーです。著作権もありません。改変もどんどんやっちゃってください。
<?php
$agent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match("/DoCoMo/", $agent)) {
print ("<div style=\"font-size:small;\">\n");
} elseif(preg_match("/KDDI\-/", $agent)||preg_match("/UP\.Browser/", $agent)) {
print ("<div style=\"font-size:x-small;\">\n");
} elseif(preg_match("/J\-PHONE|Vodafone|MOT\-[CV]980|SoftBank/", $agent)) {
print ("<div style=\"font-size:small;\">\n");
} else {
print ("<div style=\"font-size:small;\">\n");
}
?>
■読み出しこちらをになります。任意のフォルダで良いと思います。
PHPの場所はトップディレクトリから相対パスで指定してください。
<!--#include virtual="/php/fontsize.php"-->
■htmlソースはこんな感じでしょうか。
<!--#include virtual="/php/doctype.php"-->
↑前回分↑
<meta name="keywords" content="キーワード1,キーワード2" />
<meta name="description" content="サイトの紹介文" />
<title>サイトのタイトル</title>
</head>
<body>
<!--#include virtual="/php/fontsize.php"-->
本文
</div>
</body>
</html>
少しでもXHTMLベースの携帯サイトが増えることを祈っています。
CHTMLベースは捨てましょう。
コメントする