ECWorks Blog

ECWorks Blog

CakePHPを中心としたサイト開発情報をメインに公開。新しもの好きなので時々製品レポートなんかも。

【Ktai】PCやiPhoneで携帯のレイアウトを模倣するTips

icon_ktai携帯サイトをiPhoneに対応させたり、デバッグ等で簡易的にPCで携帯サイトを確認したい… そのような用途はあると思います。今回は、そんな方向けの、Ktai Libraryを用いたTipsをご紹介。

携帯向けサイトをそのままPCやiPhoneで表示すると、大抵はレイアウトが異なって表示されてしまいます。特にiPhoneはひどいもので、場合によっては文字が数pixel位の、もの凄~く見にくい画面になってしまいます。まあ、PCやiPhoneは携帯と比べて高解像度なわけで、仕方のないことなんですけど、これをなんとかしたい… そんなことを思われている方もいらっしゃると思います。
単純に、divでスクリーンサイズを(width=240で)固定してしまうのも一つのアイデアですが、それですと今度は高解像度な(SB)携帯で見にくいものとなってしまい、うまくありません。

ちなみに、iPhoneの場合は、コンテンツの横幅をオートで検出して、内容の少ないものは拡大されるのですが、そうでないものは最大980pixelとのことなので、長文が含まれているコンテンツは980pixel目一杯縮小されてしまいます。divで囲う方法で一見解決しそうな感じですが、縦方向に長い場合も縮小されるようで、確実な方法ではありません。
ただ、この件については解決する方法があり、metaタグで横方向のサイズを決めることが出来ます。

というわけで、上記を加味した上で、各端末に対応するための手法をご紹介。
ビューテンプレート(layout)はおおむねこんな感じです。
基本はこの方法でカバーできるかと思います。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<?php
if($ktai->is_iphone()){
?><meta name="viewport" content="width=260"><?php } ?>
<title><?php $title_for_layout; ?></title>
</head>
<body>
<?php
if(!$ktai->is_ktai()){
?><div style="width: 240px;"><?php } ?>
<font size="2">
<!-- &&layout&& -->

<!-- %%index%% -->
ここに内容を書きます。
<!-- %%index%% -->

<!-- &&layout&& -->
</font>
<?php if(!$ktai->is_ktai()){
?>
</div><?php } ?>
</body>
</html>

宣伝を兼ねて、Tplcutter形式で公開してみたり(笑)。
上記例では、iPhone用メタタグの数値が260となっているのですが、240だとうまくいかなくて、いろいろ調整しての数値です。
多少レガシーなhtmlタグが混じっていますが、これはcssに置き換えてもよろしいかと。

まあこんな感じで、携帯サイト製作の参考になれば。


Tagged as: , , , , ,

Comments are closed.