コピペで済ませていませんか？改めて学び直したい「Viewport」のすべて
スマートフォンをはじめとしたモバイル端末でホームページを表示することを想定するとき、Viewportと呼ばれるタグを挿入します。 タグを挿入する時、例えば以下のようなコードを*コピー＆ペーストしている方は多いのではないでしょうか。 貼り付けるだけでも問題ありませんが、構造を理解すれば好きなようにカスタマイズすることも可能です。 今回は、Viewportの基本的な概念から設定に関する具体的なコツをご紹介します。 Viewportとは？ Viewportとは表示領域のことで、ブラウザにおける仮想のカンバスサイズを決めて、サイトの表示の仕方を制御する役割があります。 例えば、上記のようなホームページがあるとします。 モバイルのViewportを指定していない場合は、デスクトップサイトで表示される横幅をモバイル端末の横幅と合わせてしまうので、以下のように非常に小さくて閲覧しにくい状態で表示されてし
iOS9でviewportのinitial-scaleが無効になる時の対策
iOS8とiOS9とでブラウザの表示が違う 先日のブログ記事をiPhone6で見ると中身が左に寄るんだけど…と言われて見てみたのですが、自分のiPhone6では異常ありませんでした。 OSバージョンを確かめながらキャプチャで見比べました。 寄ってますね。 長いコードの部分で、iOS8.4.1では横スクロールが表示されます。 viewport設定でinitial-scale=1.0が無視されているっぽい iOS9のSafariでは、初期の画面倍率を無視してページ全体を表示するよう縮小して表示しているようです。 ios9 (β) viewportに不具合か！？ ios 9 Safari / Web App Viewport Problem (expands to fit all elements in view) 同じように困っている報告も上がっています。 回避策 先ほどのスレッドでも紹介され
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cmmntr.com
