Movatterモバイル変換

[0]ホーム

サクサク読めて、
アプリ限定の機能も多数！

アプリで開く

はてなブックマーク

閉じる

テクノロジー
もう逃げない。HTMLのviewportをちゃんと理解する

気に入った記事をブックマーク

気に入った記事を保存できます
保存した記事の一覧は、はてなブックマークで確認・編集ができます
記事を読んだ感想やメモを書き残せます
非公開でブックマークすることもできます

もう逃げない。HTMLのviewportをちゃんと理解する

テクノロジーカテゴリーの変更を依頼記事元:

qiita.com/ryounagaoka

適切な情報に変更

エントリーの編集

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます

コメントを非表示にできますコメント表示の設定

ブックマークしました

ここにツイート内容が記載されますhttps://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

次回からTwitterへ自動リダイレクト

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

807usersがブックマークコメント

コメントするにはログインが必要ですブックマークを追加

ブックマークを追加

よく使うタグ

もう逃げない。HTMLのviewportをちゃんと理解する

807 users

qiita.com/ryounagaoka

よく使うタグ

はてなブックマークで
関心をシェアしよう

みんなの興味と感想が集まることで
新しい発見や、深堀りがもっと楽しく

ユーザー登録

アカウントをお持ちの方はログインページへ

記事へのコメント45件

注目コメント
新着コメント

megazalrockviewportをこういう分岐として使うのって本当はバッドノウハウだよなぁ。PCとスマホは今のところは分岐できるけど、タブレットやファブレットが絡むとviewportでは対応しきれなくなる。

2015/06/17リンク

その他

pmintそうではなく「viewportはコンテンツに合わせる」というだけのこと。つまり「どれくらいの広さで見せたいか」。それで見やすくなるかどうかは端末別。スマホかPCかではなく、タッチパネルかマウスかで分けるべき。

2015/08/04リンク

その他

eichannelinitial-scale滅ぶべしということがわかりました

2015/06/17リンク

その他

decoy2004#HTML は「これ1冊読めば大丈夫」というバイブルがないから面倒だなー。

html

2015/07/02リンク

その他

tackmanW3C的にどうなってんだってのが気になった、リバースエンジニアリングだけだと場当たりになりがちだし

html5

2015/06/24リンク

その他

love0hateほー（ブコメ1つも無かったからつけといた

2015/06/17リンク

その他

gt-r-blazewindow.screen.widthはPCではモニターの解像度(横方向のピクセル数)を返す。

2020/03/03リンク

その他

sunakake99viewport(ビューポート)について

viewport

2019/09/08リンク

その他

cha1ra“<meta name="viewport" content="width=device-width,initial-scale=1"> ”

2018/12/19リンク

その他

mayaxxx1101][ブラウザ]

2018/10/11リンク

その他

IT7C“<meta name="viewport" content="width=device-width,initial-scale=1">”

2018/06/20リンク

その他

anony3masudaFrom: Pocekt@phase Tags:

2018/06/08リンク

その他

suginoyあとで読む、で逃げてしまうのであった。

2017/09/16リンク

その他

kuronatなむなむ “<meta name="viewport" content="width=device-width,initial-scale=1">”

2017/08/26リンク

その他

kefi3104 もう逃げない。HTMLのviewportをちゃんと理解する

unclassified

2017/06/16リンク

その他

yayocanhead

2017/04/13リンク

その他

U-saku-D3DGs“widthと同じ値になる。”

2017/01/06リンク

その他

natural90000“viewportをちゃんと理解する”

2016/08/23リンク

その他

sasabe“document.documentElement.clientWidth”

2016/07/05リンク

その他

kosyokai呪文の解読やで

2016/02/04リンク

その他

haruharujane“<meta name="viewport" content="width=480">”

viewport

2016/02/02リンク

その他

KUROPON

2015/11/24

その他

lightwillスマホ対応のときはviewportを設定するとよい

2015/09/24リンク

その他

kuzumajiスマホでのレイアウト崩れがひとまず解消出来たので助かりました。

2015/08/20リンク

その他

2015/08/04リンク

その他

als_uzviewport問題

2015/07/08リンク

その他

decoy2004#HTML は「これ1冊読めば大丈夫」というバイブルがないから面倒だなー。

html

2015/07/02リンク

その他

moty0815もう逃げない。HTMLのviewportをちゃんと理解する

2015/06/26リンク

その他

tackmanW3C的にどうなってんだってのが気になった、リバースエンジニアリングだけだと場当たりになりがちだし

html5

2015/06/24リンク

その他

igrep取り敢えず僕のブログは呪文のように貼り付けておくだけで十分かも。

2015/06/24リンク

その他

kitokitokiスマホ判定

2015/06/24リンク

その他

namikawamisaki手打ちHTMLで20年たってしまったマン

2015/06/24リンク

その他

hedeyoshiくわしい

2015/06/22リンク

その他

traegerlb私も・・・逃げていた

2015/06/17リンク

その他

shinchuもう逃げない。HTMLのviewportをちゃんと理解する - Qiita

2015/06/17リンク

その他

tihata逃げてばかりでした

2015/06/17リンク

その他

コメントするにはログインが必要ですログインしてコメント

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

プレビュー

はてなブックマークボタンを作成して埋め込むこともできます

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

usersに達しました！

さんが1番目にブックマークした記事「もう逃げない。HTM...」が注目されています。

気持ちをシェアしよう

ツイートする

もう逃げない。HTMLのviewportをちゃんと理解する

と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。いろいろ調査した結果、以下の考え...と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。いろいろ調査した結果、以下の考え方で理解できると思う。まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返すし、media queryの条件判定でも480pxの画面幅が使われる。次にviewportを実際の液晶画面に表示する。この時、view