XHTMLだけで携帯の画面サイズに上手く合わせる基本

By fukumoto - 08/10/24 - このエントリをはてなブックマークに追加このエントリをYahoo!ブックマークに追加このエントリをdel.icio.usに追加このエントリをFC2ブックマークに追加

携帯サイトはPCサイトと違い、
画面サイズと文字サイズを意識してサイトをつくらなければいけません。
 

横にダラダラと書き続けると当然、
改行したくないのに改行されたりします。
そうなると見栄えも悪くなり、
思っていたのと全く違うサイトが出来てしまうこともあります。
ですので、画面サイズは文字サイズを意識して書き進めることが重要です。
 

といっても、携帯電話の画面は端末によっても変わります。
画面サイズが同じでも画像解像度が違うと、
1行に表示できる文字数などが変わってきます。
例えば、ソフトバンクの高解像度VGA端末。
全体を統一しようとある一定のピクセル数でサイトを作っても、
この端末では高解像度をそのまま保つため小さくなってしまいます。
 

逆に言えば、このソフトバンクの高解像度端末以外では、
統一して書いてもまず問題ないと言う事です。
その統一のピクセルは240ピクセル。240ピクセルで書けば、
ほとんどの端末に対応したものが書けるということ。
ちなみに、ソフトバンク以外の高解像度端末では、
画像の自動拡大縮小機能がブラウザについているので、
問題なくきれいに表示されます。
(このソフトバンクの問題は参考サイトにスクリプトがありましたので参考にしてみてください)
もし各キャリア端末ごとのデータが気になる場合はコチラも参考にして下さい。

プログラムを用いて対応させる場合の当サイト内の記事をご紹介します。

「ケータイで表示できる画像のブラウザ画面サイズ」

 

「ケータイ端末別に画像画面サイズを変換するには」

 
 
大体のサイトに適合した携帯サイトを難しいプログラムなしで作るときは、
この横240ピクセルで書くということに特に意識してみましょう。
 

ただ、横240ピクセルで書くとなると自ずと、書ける文字数も限られてきます。
それが上の方に書いた、勝手に改行されるということに繋がります。
そうなると見栄えが悪くなりますよね。
そんな時に重宝するのが、marquee tag(マーキータグです)。
そうあの、流れるように動くヤツです。
マーキータグというとPCサイトなんかでは、なんかしょぼい感じがしますよね。
でも1行に書ける文字数が少ない携帯サイトではとても重宝されるのです。
 

マーキータグ

<marquee>マーキータグ</marquee>

 
 
オプションを使えば自由自在

<marquee direction="up" behavior="alternate">オプションを使えば自由自在</marquee>

オプション色々あります。
http://www.tagindex.com/tool/marquee.html
 

あまり活用しすぎると見るに耐えないサイトになるので、
活用しすぎないように、是非活用して下さい。
 
 
 

参考サイト
 
 

ケータイ端末プロファイルデータ(無償版)
http://imri.impressrd.jp/iil/k-taiprofile

ソフトバンクVGA端末の表示問題を解決する3キャリア対応携帯画像変換スクリプト
http://dspt.blog59.fc2.com/blog-entry-40.html