スマートフォン用に幅を設定するには<head>内にmetaタグを追加する
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
contentの中身は
■width=***
ここで表示する横幅を指定する。
ここには数字を入れてpx幅を指定することもできるらしい。
機種によって幅が違ったり、端末を横にすると幅が変わったりしてもそれに合わせて表示したい場合は"device-width"と入れると、各端末の幅に合わせてくれる
■initial-scale=*
初期表示の倍率。1で通常表示。2にすると2倍。
■maximum-scale=*
拡大可能な倍率。画面を拡大する場合の最大の拡大率を設定する。
他にも
■user-scalable
ユーザーが拡大・縮小できるかどうか。yes/noで設定する。
■height
高さ設定。device-heightで端末の高さに合わせられる
■minimum-scale
縮小した場合の最小の倍率の設定
ちなみにWordPressでiPhoneで見た場合は、iPhone用のテンプレートに切り替えて表示したいって場合は「iphone theme switcher」ってプラグインがある。
詳しく説明してくれている方がおります。
iPhoneからアクセスした時のテーマを指定できるWordPressプラグイン「iPhone theme switcher」
iPhoneに限らず、いろんなブラウザや端末しだいで、それぞれテンプレを変更するためのプラグインもあったと思うけど、思い出せなかった。思い出せたら追記しよう。
参考サイト
iPhone 3G用のWebページを作る[AllAbout]
作って学ぶスマートフォン対応サイトの基本
0 件のコメント:
コメントを投稿