それぞれのスマートフォン画面サイズにページをフィットさせる件

2014年4月24日木曜日

Androidとか… CSSとか… HTMLとか… スマホとか…

t f B! P L


スマホ用にページを作ってみても画面いっぱいにフィットしない?

という現象が起こった方はいませんでしょうか?w

これはスマホの持つ画面解像度が原因となります。

つまりは、それぞれのスマートフォンで解像度が異なっていることですね。

これを解決するにはそれぞれの端末の解像度に自動的に合わせてあげる必要があります。

こうなると、プログラムで自動的に判別してそれぞれの設定を振り分けるのでは?

と、恐怖におののく方もいらっしゃるかと思いますがご安心ください!ww

この設定は非常に簡単!

たった1行のmetaタグを設定することで、それぞれの端末に自動でフィトさせ表示することが出来るんです!

と言う事で、以下のタグをページのhead内に設定してください。



何とも簡単ですよね!

これで、1つ1つ端末ごとに解像度の設定を行う必要なく自動でジャストな表示ができるようになります。

もし、これでも綺麗に表示されないといった場合には、そもそもスマホを考慮した作りになっていない可能性がありますので、設定内容を一度確認してみてください。

なお、タブレットの場合には解像度がPC並に高いため普通にPC用のページを表示する場合がほとんどかと思います。

タブレットでスマホサイトを表示しようと努力されている場合、そもそもの設計内容を見直したほうが良いかもしれませんね…。

余談でした!ww
現場のプロが教える スマートフォンサイト 制作ガイドブック [HTML5&CSS3&JavaScript] (DESIGN & WEB TECHNOLOGY)

著:松田 直樹 , 他

このブログを検索

Twitter