1 - 9 件 / 9件
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Posted Jun 2, 2021 2021年06月02日T07:00:00-07:00 by Abdulrahman Alqabandi IntroductionWhen it comes to an application’s user interface (UI), one may care for the aesthetics, design consistency, simplicity, and clarity to ensure a good UI. However, an application like a browser where untrusted content is loaded, parsed, and given APIs to invoke all sorts of UIs then a new layer of concern appears: Desi
2024年04月17日 追記 この記事の結論としては maximum-scale=1.0 にすることとなっていますが、これはアクセシビリティ違反となる対応方法です。 自戒の意を込めまして記事自体はそのまま残しておきますが、もしこの対応をされた方は再度対応を見直していただき、もしこの対応を継続する場合はアクセシビリティ違反であることを念頭に置いていただければ幸いです。 参考: https://developer.mozilla.org/ja/docs/Web/HTML/Viewport_meta_tag#maximum-scale こんにちは。ひらやま(@rhirayamaaan)です。 Web を作っているときに input タグや textarea タグで入力領域を作ることがあるかと思います。 実装をし、いざ確認をしてみると、iOS のときに入力しようとした際に少しばかりズームインしてしま
The viewport and its units To size something as tall as the viewport, you can use the vw and vh units. vw = 1% of the width of the viewport size. vh = 1% of the height of the viewport size. Give an element a width of 100vw and a height of 100vh, and it will cover the viewport entirely. A light blue element set to be 100vw by 100vh, covering the entire viewport. The viewport itself is indicated usi
In November, with the release of Chrome 108, Chrome will make some changes to how the Layout Viewport behaves when the on-screen keyboard (OSK) gets shown. With this change, Chrome on Android will no longer resize the Layout Viewport, and instead resize only the Visual Viewport. This will bring Chrome on Android’s behavior up to par with that of Chrome on iOS and Safari on iOS. Here's some backgro
Tailwind CSS v3.4: Dynamic viewport units, :has() support, balanced headlines, subgrid, and more There's nothing like building a major new product for finding all the features you wish you had in your own tools, so we capitalized on some of that inspiration and turned it into this — Tailwind CSS v3.4. As always the improvements range from things you've been angry about for years, to supporting CSS
Since the introduction of CSS viewport units in 2012, many of us have been using width: 100vw as a way to set an element’s width to the full width of the viewport. But, as Šime Vidas explains in this deep dive, 100vw does not always represent the full width of the viewport due to differences in how browsers handle scrollbars. Learn why this is an issue, how to avoid it, and what approaches we may
これまでSVGに関しては、アイコンやロゴをpngやgifなどのビットマップ画像の代わりに少し使う程度で、アニメーションに関してもCSSアニメーションやJavaScriptのDOMアニメーションで事足りていました。 しかしSVGのことをちゃんと知ってマイクロインタラクションとして使えるようになりたいと思ったので基礎から勉強します。 SVGとは ベクターグラフィックスである XMLである ブラウザ対応 宣言と名前空間 XML宣言 DOCTYPE宣言 名前空間の宣言 viewPortとviewBox viewBoxについて viewPortとviewBoxの関係 主な SVG 要素 circle 要素 rect 要素 line 要素 埋め込み方法 1. img要素として埋め込む 2. 背景画像として埋め込む 3. 要素(インラインSVG)として埋め込む 4. 外部メディアとして埋め込む ネームス
はじめに W3CのCSS Values and Units Module Level 4で、ビューポート単位についていくつか仕様が変更され、ビューポート単位にLarge viewport、Small viewport、Dynamic viewportといったビューポートサイズの単位が追加されました。 この新しいビューポート単位は、ほとんどのブラウザの最新バージョンでは使えるようになりましたが、 Can I use でどのくらいのユーザーが対応しているかを確認してみると、2023年2月1日時点で、22%のユーザーは、ちゃんと表示されない状況になっています。 どのくらいまで許容するかは、ドメインごとに違うとは思いますが、実業務で使うには、悩ましいくらいの数値だと思います。 そのため、この記事では、まだ新しいビューポート単位が使えない人に向けてた記事になります。 新しいビューポート単位 新しいビ
何が正しいのか、よくわからない・・、となりがちな、HTMLのおけるviewport の書き方についてです。 viewport はこう書くのが正解 先にまず結論から。viewportはこのように書くのが正解です。当然ですが、HEADタグの中に記載してくださいね。 <meta name="viewport" content="width=device-width"> ただし、これはページを「レスポンシブ」に設計した場合に限ります。 モバイル端末への対応を行わず、PCレイアウトのみで表示させたい場合は、この限りではありません。(詳しくは後述) モバイル端末ブラウザーで、タップの反応速度が早くなる! 上記のviewport指定方法「width=device-width 」に関する、意外で最も重要なポイントは、モバイル端末では、この記述によってタップの応答が早くなるという点です。 Googleの文献
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く