[B! viewport] y-103のブックマーク

スマートフォン用サイトを制作するデザイナーさんに伝えたいWebブラウザのViewport(表示領域)の話。エンジニアにも役立つかも。 Part2｜Takumi Hasegawa (unshift)｜note

スマートフォン用サイトを制作するデザイナーさんに伝えたいWebブラウザのViewport(表示領域)の話。エンジニアにも役立つかも。 Part2 今回は・少し厄介なランドスケープ時のViewportの高さの話・かゆいところに手が届きそうで届かないCSSのvw/vhの話・これまた厄介なアプリ内ブラウザ (WebView)でのvhの話の三本立てでお送りしたいと思います。・・・少し厄介なランドスケープ時のViewportの高さの話Webコンテンツ閲覧中に、スマートフォンを横向きで使うシチュエーションって個人的にはそんなにないですが、全画面 (html, bodyのwidth, heightが100%)のコンテンツだったり、キービジュアルをViewportに合わせた大きさにする、といったようなコンテンツではランドスケープ時の挙動に注意が必要です。 Android Chromeの場合 A

y-103 2021/02/09

リンク

固定フッターのiPhoneX対応 | Simple is Beautiful.

固定フッターの余白をiPhoneXに対応させる固定フッターにSNSボタンなどを置いている時、こんな感じでiPhoneXだと下の角が丸く切り取られてしまうので余白がなくなってしまったり、下の黒いバーのに被ってしまったりして困るので調べてみました。 viewport まずはviewportで viewport-fit=cover を指定します。 <meta name="viewport" content="initial-scale=1, viewport-fit=cover"> HTML <div class="fixedfooter"> <div class="tw icon">t</div> <div class="fb icon">f</div> <div class="hb icon">B!</div> <div class="line icon">line</div> </div

y-103 2019/04/11

リンク

iPhone Xのセーフエリアとは？表示が画面下のホームバーと被る時の対処法（CSSのみで対応可） - バンビの初心者ブログ教室

★今回はブログやサイトのiPhone X 画面の対応に関して★ CSSで画面の被りを解消する方法「iPhone X」の画面の構造セーフエリアの考え方 ①METAタグで「セーフエリアあるよ」と教える！ ②次も簡単！CSSでセーフエリアまで底上げすれば良いはてなブログの人は... 実は遅まきながら…つい先日iPhone6sから→iPhone XSに機種変したんです。それで自分のサイトを見てみたら、がーん！！！被ってんじゃん！！！せっかく気に入って設置していた、自作のスマホ用のボトムメニューに画面下のバーが被ってしまい見えなくなっちゃっています... ちなみに自作のスマホ用ボトムメニューのCSSはこちらで公開しています↓↓ 【レスポンシブ】スマホ固定フッターメニュー★ボトムメニューそれに、角も丸まっているので、そこに何か表示している場合は見えなくなっちゃう可能性もあると言うわけで

y-103 2019/04/11

リンク

[CSS]スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法

ビューポートを使った単位（vw, vhなど）は、特にスマホの各ブラウザにおいて複雑です。例えば、vwのスクロールバーを考慮する必要がありますか？サイトのナビゲーションやページコントロールはどうでしょうか？それらは計算に含まれますか？スマホで要素をビューポートの高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法を紹介します。 The trick to viewport units on mobile 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。ビューポートの高さ（vh）の仕様高さいっぱいの要素を表示する方法ビューポートのリサイズにも対応するビューポートの高さ（vh）の仕様 W3Cの仕様では、ビューポートの単位をどのように計算するかは漠然としています。スマホでは高さが重要になることが多いので、ビューポー

y-103 2018/08/08

リンク

[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法

先日の記事「フォントサイズの指定方法（翻訳版）」で、CSSの比較的新しい単位「ビューポートの単位(Viewport Units)」について触れました。この単位「vw, vh, vmin, vmax」はブラウザのビューポートのサイズに基づくもので、これらの単位で指定した実際の大きさはビューポートの大きさによって変化するため、レスポンシブデザインにあった単位と言えるでしょう。これらの単位を使うことは「フォントサイズの指定方法」でフォントサイズに使うことを反対しましたが、レイアウトでは非常に役立つ単位です。 Viewport vs. Percentage Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。ビューポートの単位(Viewport Units)とは要素を幅いっぱいに指定 (% > vw) 要素を高さいっぱいに指定 (

y-103 2015/07/22

リンク

はてなブックマーク

タグ

関連タグで絞り込む (7)

viewportに関するy-103のブックマーク (5)

お知らせ

今週のはてなブックマーク数ランキング（2024年6月第5週）

今週のはてなブックマーク数ランキング（2024年6月第4週）

今週のはてなブックマーク数ランキング（2024年6月第3週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス