[フレーム]
はてなブックマークアプリ

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

アプリで開く

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

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

エントリーの編集

loading...

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

タイトルガイドライン

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

タイトル、本文などの情報を
再取得することができます
コメントを非表示にできます コメント表示の設定

ブックマークしました

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

Twitterで共有

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

325users がブックマーク コメント 23

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる

325 users zenn.dev/tak_dcxi

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

はてなブックマーク

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

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

ユーザー登録

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

記事へのコメント23件

  • 注目コメント
  • 新着コメント
cacacactus
css解釈コロコロ変えるのがクソなのはそれはそうなんだけどヒーローエリアを100vhどーんが必要なサイトって本当はそんなにないのではと思う。大体は自己満で終わってる。

その他
diveintounlimit
このネタつい最近コリスで見たとこだ

その他
ichi404
無理矢理height設定しなくてもflexのcolumnで解決する事ちょいちょいある

その他
ttkazuma
かれこれ20年は同じようなことを繰り返してる

その他
arapro
chromeはほんとcss解釈をコロコロコロコロ変えるよな...

その他
hamaco
"CSS変数はJavaScriptやメディアクエリで値を変えられるのでとても便利"しらんかった...。

その他
Dragoonriders
画面回転は誰が管理すべきものか、アドレスバー表示は誰のものか、どちらもユーザーのものだろう。そう考えずにクライアントの言いなりに作り込むのは「デザイン」による押しつけだろうな。

その他
gaku_ds
もう飽きた。でも止まれないんだよね

その他
boxshiitake
iOSめんどくせ

その他
cacacactus
cacacactus css解釈コロコロ変えるのがクソなのはそれはそうなんだけどヒーローエリアを100vhどーんが必要なサイトって本当はそんなにないのではと思う。大体は自己満で終わってる。

2020年10月04日 リンク

その他
otchy210
100vh の話より、こっちの方が有用な情報だった。知らなかったよ。これクソ便利では?→ "CSS変数はJavaScriptやメディアクエリで値を変えられるのでとても便利"

その他
flirt774
chromeがどうと言ってる人は内容見てない。Safari(iOS)の独自仕様でしょ

その他
circled
chrome is new IE

その他
nicht-sein
というか、これはIE滅びろ案件ではなくvhにアドレスバーを考慮しないSafari修正しろ案件なのでは疑惑。最近はSafariが非対応っていうのが増えてきた気がする。いや、Google先走り過ぎも否定できないけどねw

その他
poponponpon
resizeはaddEventListenerよりアレでやったほうがいいんじゃないかな、あのあれ名前忘れたけどアレよ

その他
buhoho
自分のサイトは7割iPhoneユーザーだけど、手元にiOSに無いからスタイルどうなってるのか正直わからないな。伝統的なWebレイアウトにしときゃ大丈夫だろう精神

その他
ttkazuma
ttkazuma かれこれ20年は同じようなことを繰り返してる

2020年10月04日 リンク

その他
primedesignworks
Francfranc に置いてあるサンプル表示用のパソコンのブラウザを見る度に、「Chrome がシェアトップになる日が現実になり、IE がシェアトップという地獄から抜け出せて感謝してる」と心から思ってる。

その他
diveintounlimit
diveintounlimit このネタつい最近コリスで見たとこだ

2020年10月04日 リンク

その他
k3akinori
またiOS Safariか

その他
ichi404
ichi404 無理矢理height設定しなくてもflexのcolumnで解決する事ちょいちょいある

2020年10月04日 リンク

その他
mayumayu_nimolove
そういうのちゃちゃってやってくれるライブラリとかないの?

その他
cartman0
正直従来のウェブアクセシビリティのようにスクロール頼ったほうが早いのよな

その他
AzuLitchi
見出しに「〜問題」とか「〜の件」とか入れてるのを見ると鳥肌立つほど寒いので気をつけようと思った。

その他
gachapining
"-webkit-touch-callout" このハックは Chrome が対応した瞬間に崩れるからなぁ

その他
kvx
使う場所が限定されないし、IEは100vhになるし、かなりいい方法かも。100vwにスクロールバー含まれる問題もどうにかできないかなぁ。/勘違いしてる人いるけど—vhはブラウザ仕様に影響受けない方法でしょ?

その他
arapro
arapro chromeはほんとcss解釈をコロコロコロコロ変えるよな...

2020年10月04日 リンク

その他
d4-1977
100vhというか、vhの上手い使い方がまだまだわからない...

その他

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

リンクを埋め込む

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

プレビュー
アプリのスクリーンショット
いまの話題をアプリでチェック!
  • バナー広告なし
  • ミュート機能あり
  • ダークモード搭載
アプリをダウンロード

関連記事

usersに達しました!

さんが1番目にブックマークした記事「iOSでも100vhをい...」が注目されています。

気持ちをシェアしよう

ツイートする

iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる

TAK(@tak_dcxi)です。今回もCSSに関する投稿です。 以前このようなツイートをしました。 メインビジュア... TAK(@tak_dcxi)です。今回もCSSに関する投稿です。 以前このようなツイートをしました。 メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです...。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。 この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから

ブックマークしたユーザー

  • techtech05212024年04月07日 techtech0521
  • hg_kosuke2022年06月24日 hg_kosuke
  • sig2022年04月05日 sig
  • noguful2022年01月19日 noguful
  • Kmusiclife2022年01月16日 Kmusiclife
  • pageru2021年10月28日 pageru
  • okyawa2021年10月12日 okyawa
  • sutetuki2021年10月02日 sutetuki
  • mimosafa2021年08月20日 mimosafa
  • utgwkk2021年07月28日 utgwkk
  • team-chan32021年06月10日 team-chan3
  • KisstBnts2021年05月06日 KisstBnts
  • wangeru2021年04月13日 wangeru
  • Lhankor_Mhy2021年03月22日 Lhankor_Mhy
  • klim08242021年03月01日 klim0824
  • karur4n2021年02月26日 karur4n
  • Arahabica2021年02月11日 Arahabica
  • clea00002021年02月08日 clea0000
すべてのユーザーの
詳細を表示します

ブックマークしたすべてのユーザー

同じサイトの新着

同じサイトの新着をもっと読む

いま人気の記事

いま人気の記事をもっと読む

いま人気の記事 - テクノロジー

いま人気の記事 - テクノロジーをもっと読む

新着記事 - テクノロジー

新着記事 - テクノロジーをもっと読む

同時期にブックマークされた記事

いま人気の記事 - 企業メディア

企業メディアをもっと読む

はてなブックマーク

公式Twitter

はてなのサービス

Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しましたx

AltStyle によって変換されたページ (->オリジナル) /