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

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

アプリで開く

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

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

エントリーの編集

loading...

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

タイトルガイドライン

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

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

ブックマークしました

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

Twitterで共有

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

472users がブックマーク コメント 52

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

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

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

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

よく使うタグ

CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる

472 users coliss.com

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

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

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

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

よく使うタグ

はてなブックマーク

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

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

ユーザー登録

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

記事へのコメント52

  • 注目コメント
  • 新着コメント
オーナーコメントを固定しています
coliss
オーナー CSSの新しいビューポート単位「lvh」「svh」Safari 15.4でサポートされました。

その他
kagioo2uma
Safariは令和のIE6。

その他
mayumayu_nimolove
いやいや標準のvhに合わせてくださいよsafariさん。つかみんな対応するから図に乗るんじゃね?w

その他
snipesnaps
こんな場当たり的に機種やブラウザ特有の単位を増やしておいて、表示のための言語なのにまともな幾何演算も存在せずなのに苦し紛れのif構文がハックとして存在するCSSはやっぱり失敗言語だと感じる。

その他
nakamura-kenichi
Safariはもう対応から外したらええと思うで。仕様が勝手実装に付き合う必要ないやろ。

その他
raitu
Safariがどんどん標準からずれてく

その他
iww
ピクセルだけでいいよ

その他
manaten
iOS safariが我が道を行くせいでiOS simulator使えるmacを開発用に用意せざるを得ないし、そういう商売なんじゃないかと思う。普通にWebページ作ってて日本で圧倒的シェアのiOS safariに対応しないなんて選択存在しないからなあ

その他
GENS
マジカルワード「Safariは対応してないんスよ〜」

その他
securecat
スクロール操作に応じてlvhとsvhが変わったりしないっけ?

その他
オーナーコメントを固定しています
coliss
オーナー coliss CSSの新しいビューポート単位「lvh」「svh」Safari 15.4でサポートされました。

2022年05月26日 リンク

その他
queuex
IE6が死んで久しい今Safariが腐った牛乳ポジションに鎮座している もう積極的に対応無視しようか迷うレベル

その他
zzitne
やっと...

その他
ku_marin
Safariさんはほんとさぁ...

その他
circled
Safariはスクロールすると表示可能域が広がるので、URL開いた時の初期画面の最大高がスクロールに従って動的に変わるのが原因かと。普通に考えればCSSではなく、JSでの対応向きな動きなのよな。

その他
IGA-OS
Safariがガラパゴス化していってるらしい

その他
kagoyax
全ユーザーの7-8割が最新版にアップデートするからIE6なんかより全然ましだぞ

その他
rryu
CSSのドラフトには既にlvh、svh、dvhが存在していて、vhをdvhと同等に実装しているブラウザと挙動が違うという問題に対してdvhを使えという回答になっているらしい。ただし他ブラウザはdvhに対応していない...

その他
chiba1008
サファリはどうでもいいからwebviewをwebkit使えるようにしてよ。

その他
small_tree
単位がやたらと増えすぎて把握するのも面倒になるのは電磁気学と放射線関係だけで十分です

その他
adsty
iOSのSafariの100vh問題を解決できる。

その他
ext3
今までどうしてたんだむしろ

その他
manaten
manaten iOS safariが我が道を行くせいでiOS simulator使えるmacを開発用に用意せざるを得ないし、そういう商売なんじゃないかと思う。普通にWebページ作ってて日本で圧倒的シェアのiOS safariに対応しないなんて選択存在しないからなあ

2022年05月26日 リンク

その他
sd-craft
ブラウザ界のSafari、ゲーム界のSwitch

その他
remonoil
や め ろ

その他
cartman0
単位増え過ぎだなあ

その他
gomaberry
iPhone Safari だけ挙動違うっての結構やられて、そのたび回避のコードとか入れてるけどほんと勘弁してほしい。やっとIEなくなってきたのに。

その他
labor9
インターネット黎明期での「こうっだったらいいな」的拡張をしてきた側面もあるIEと、そういった時代を経た後では悪意の重みが違う。

その他
xxxxxtttttt
せっかくIEがそろそろ死ぬというのに・・・

その他
AzuLitchi
W3Cの定義が曖昧なので標準がChromeってわけでもないよねこれ。一行追記で対応できるなんて有難い。20年間に来やがってくださいよ。本当のIE6を味合わせてあげますぜ。

その他
cl-gaku
いやSafariが合わせーや

その他
sippo_des
理由付きで対応不要なブラウザが増えてくのは嬉しい。

その他
meisoT
どんどん新しい単位でてくるゥ

その他
sp_ice
カオスだな

その他
retore
SafariはSafariがクソなだけならいいんだけどiOS上の他のブラウザまで巻き込んでクソ化するのがマジでクソ

その他
Funyapu
Mac Safariよりはまし。

その他
chocodoughnut
css変数で対応することが多かったけどしばらくしたらこっちも使えそう

その他
sin20xx
基本的にビジネス向けではSafariは非対応としている。そもそも使ってもらうメリットが皆無なのと、IE同様に対応するコストが本当に無駄。実際問題それで困る事がほぼないから、恐らくコンシューマ向けでも影響なさそう

その他
mohritaroh
"これらの古い単位には明確な定義がなく、どのように振る舞うかはUA(ブラウザ)次第となります。あるブラウザ(現在のSafari)はvhをlvhのように振る舞い、他のブラウザはvhをdvhのように振る舞います"

その他
poponponpon
コレ自体にバグが出てそれに対応するためのバッドノウハウが溜まっていく未来が目に見える。

その他
mongrelP
ユーザー数は正義...感

その他

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

リンクを埋め込む

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

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

関連記事

usersに達しました!

さんが1番目にブックマークした記事「CSSの新しい単位「...」が注目されています。

気持ちをシェアしよう

ツイートする

CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる

Safari 15.4(最新は15.5)で新しいビューポート単位「lvh」「svh」がサポートされました。ビューポート... Safari 15.4(最新は15.5)で新しいビューポート単位「lvh」「svh」がサポートされました。ビューポートを基準にした単位で、この単位を使用することで、iOSのSafariで100vhがビューポートの高さではないという仕様に対応できます。 今まではCSSの-webkit-fill-availableがその対応方法でしたが、ネストされた要素やcalc()内では使用できません。新しいビューポート単位を使用すると、そういった問題もなくなります。 The Large, Small, and Dynamic Viewports by Bramus 2021年の記事ですが、Safari 15.4でこれらの新しいビューポート単位がサポートされたので、このタイミングで紹介します。 下記は各ポイントを意訳したものです。 (注記)当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじ

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

  • nekonado2024年12月12日 nekonado
  • mkusaka2023年10月08日 mkusaka
  • murata_s2023年08月01日 murata_s
  • massava2023年07月20日 massava
  • satopian2023年04月24日 satopian
  • Arahabica2023年04月02日 Arahabica
  • satoshie2023年03月08日 satoshie
  • gazza0692022年07月24日 gazza069
  • dellab722022年06月13日 dellab72
  • usako11242022年06月03日 usako1124
  • queuex2022年06月03日 queuex
  • teppeis2022年06月01日 teppeis
  • gonhainu2022年05月31日 gonhainu
  • yukisd22022年05月31日 yukisd2
  • yoshi-nkyma2022年05月31日 yoshi-nkyma
  • machupicchubeta2022年05月30日 machupicchubeta
  • sanko04082022年05月28日 sanko0408
  • zzitne2022年05月28日 zzitne
すべてのユーザーの
詳細を表示します

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

同じサイトの新着

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

いま人気の記事

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

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

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

新着記事 - テクノロジー

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

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

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

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

はてなブックマーク

公式Twitter

はてなのサービス

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

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