スマートフォンとタブレットでviewportを振り分ける[js]
まえがき 皆さん、いきなりですがスマホサイトってどうやって作りますか？ KoToRiは「viewport」をこんな感じで指定して <meta name="viewport" content="width=device-width, initial-scale=0.5,minimum-scale=0.5, maximum-scale=0.5, user-scalable=yes"> 横幅640pxで作成されたデザインデータを用意してそのままコーディングします！ 「viewport」に「initial-scale=0.5」を指定することで横幅640pxでコーディングしたものを50%の大きさで表示することができます。 つまり横幅320px！ちょうどiPhoneのディスプレイの幅のサイズで表示されるわけですね。 この手法だと画像もボケないし楽だし結構ベーシックなやり方だと思います。 ただ、この「v
![スマートフォンとタブレットでviewportを振り分ける[js]](https://cdn-ak-scissors.b.st-hatena.com/image/square/75a93f2686da354d426e73a702053a5b4a1f4b7a/height=288;version=1;width=512/https%3A%2F%2Fkotori-blog.com%2Fwordpress%2Fwp-content%2Fuploads%2Fthumb5.gif)
WordPressにてviewportを画面サイズで出し分ける
WordPress 度々書いているバッドノウハウっぽい内容ですが、今回も表示はできたので記録として記事にします。 万が一にも同じ状況の方がいた時のためのヒント的なものなればいいなと。 前提 対象は、WordPressでレスポンシブの設定があるサイト。フレキシブルレイアウトで、600pxあたりを境にMedia Queriesの設定でサイドが下に落ちるという感じです。この600pxが曲者で、600以上のタブレットデバイスでは横が切れてしまいます。 実現したいのは、 「スマートフォンはサイドを落とす」 で、 「タブレットはサイドを落とさずぴったりフィット」 でした。 なお、固定幅だけのサイトであればviewportのwidthを以下のように設定すれば画面にフィットします。 <meta name="viewport" content="width=1000px" /> <!--固定幅1000pxの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
