ケータイサイトをすげー簡単にスマホ対応させる。

うさうさん用覚え書き。
<へっど>
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=2″>
↑一番はじめの<を半角に直す。
</へっど>
★ケータイサイトをテーブルの幅240を土台にして作っている場合作っている場合、このメタタグ無しだと、iPhone等のちょっと大きめディスプレイのスマートフォンなどでみたときに、最初の表示画面がかなり縮小されて表示されるけど、このメタタグを入れると、デバイスの幅で表示される。
Before
$うさうさん(3ω3)的徒然日記。
After
$うさうさん(3ω3)的徒然日記。
画像が携帯用に240幅だとガビガビなのは仕方ないね~
iPhone/iPodTouchの場合はよ小幅が320なので、両端が40ピクセルづつ空いて表示されるけど、まぁ、、、許せるレベル。
実際のところ土台のテーブルを320幅で設定してもケータイでは問題なく表示されるから、そうすれば背景色を変えているような部分はちゃんと前画面で表示されるけど、240合わせで作ったサイトだとなんか間抜けな表示になったりするから、自分的には240のままでいいw
ホントは320幅用に別に作るのが一番だけど。

Posted in 宇佐兎三用覚書.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です