CSSのsvh・dvhが全ブラウザ対応。iOS・Androidの画面いっぱいに要素を広げる最適解
iOS SafariやAndroid Chromeの画面の高さいっぱいにヒーローイメージを表示するという表現は、よく見かけます。 高さをいっぱいに広げるのに100vhを使うと、不要なスクロールが発生し、意図通りに表示されません。 この問題を解決するために、特殊なCSSを使ったりJSを使ったりと、開発の現場では多くの苦労がありました。 本日（2022/11/30）リリースされたGoogle Chrome 108で対応したsvhを使えば、手軽に画面いっぱいのヒーローイメージを作れます。 Safari・Firefoxでは対応済み、Chromeと中身が同じEdgeは12/1週リリースの108で対応するので、全ブラウザで使える時代が来ます。もちろん、iOS・Androidも対応です。 本記事では、svhの使い方、同様に使えるようになったdvhやsvmaxなどの違い、従来の手法のデメリットをデモを交え
11月末のChrome 108でビューポートのサイズ変更動作が変更、position: fixed;は配置がずれる可能性があります
11月末にリリース予定のChrome 108で、ビューポートのサイズ変更動作が変更されます。簡単に言うと、Android版Chrome 108の挙動はiOS版Safariと同じになり、より一貫性のあるクロスブラウザの動作が実現されます。 サイズ変更動作の内容とサイズ変更の仕組み、Chrome 108のリリースまでに何を準備しておけばよいのかを紹介します。 特に、position: fixed;を使用している要素やビューポート相対単位に依存している要素は配置がずれてしまう可能性があるので、対応が必要です。 Prepare for viewport resize behavior changes coming to Chrome on Android by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 はじめに レイアウトビューポートと
iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる
TAK(@tak_dcxi)です。今回もCSSに関する投稿です。 以前このようなツイートをしました。 メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。 この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから
[Swift]WKWebViewで長押しによるメニュー表示を止める | DevelopersIO
CX事業本部の中安です。まいどです。 本日はiOSアプリ開発の小ネタになりますが、WKWebViewで「長押しによるメニュー表示を止める方法」を書き留めたいと思います。 iPhone や iPad を使っている方ならよく使うと思いますが、 ブラウザ上の文字を長押しすると、下図のようにPCでいうところの右クリックのように範囲選択してコピー等をするためのメニューが表示されます。 これはWKWebView。つまり、アプリ上のWEBビューでも同じ動作をします。 しかし、アプリによってはこのメニュー表示をさせたくないこともあるかもしれません。 今回は、このメニュー表示を制御してみることにしましょう。 前提となる実装 今記事ではUI実装については割愛しますが、 今回作る画面(名前をWebViewControllerとします)では WKWebViewが画面全体に配置されているものとします。 その場合の必
![[Swift]WKWebViewで長押しによるメニュー表示を止める | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/d9c911035d6b7c1c0afb32d4e1e6f2e752169d3a/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2018%2F12%2Feyecatch-swift.png)
iPhone/iPad/Apple Watch解像度(画面サイズ)早見表 - Qiita
用語解説 ポイント boundsやframe等で使用される論理的な画面サイズ。通常はこれを意識してプログラムを作成します。 ピクセル 描画が行われる論理的な画面サイズ。ピクセルパーフェクトな描画が必要な場合には、このグリッドに合うように描画を行う必要があります。 デバイス 端末に搭載された液晶の物理的なピクセル数。これが上記ピクセル数と一致しない場合には、ピクセルパーフェクトの描画は非常に難しくなります。 このサイトの解説がわかりやすいです。 https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions 拡大モード iPhone6, 6 Plusでは、画面設定から拡大モードが選択できます。 上記の表にまとめた通り、retinaの倍率はそのままで、ワンサイズ小さいiPhone相当のポイント数になります。 iPho
iPhone X の Safari における Web コンテンツの表示 - ONO TAKEHIKO - Medium
iPhone X が発表されて間もなく、ディスプレイの「切り欠き」については至るところでちょっとしたイジリ合戦が始まっています。中には実際に信じてしまっている人もいるほど秀逸なものがありまして、それがこちら。 思わずクスッときてしまいますが（笑）、まあ当然こんなことにはなりません。 iPhone X にはディスプレイの上下左右に iOS の占有領域が存在し、それ以外（アプリのタッチイベントを認める領域）を Safe Area と呼ぶようです。Safe Area の外にある上部領域にはステータスバーとして時計やアンテナのインジケータなど iOS のシステムアイコン等が並び、下部の領域には iPhone X で導入された「ホームバー」が存在することになります。 では iPhone X の Safari で Web サイトを表示した場合に一体どのようになるのか？それを Web 上の情報を元にまと
『iPad 独特の CSS トラブルに javascript で対策してみました。』
iPad(MobileSafari) だとこんなことがトラブルんだな、という 珍しい問題を見つけたので 簡単に対策しつつ レポしたいと思います。 HTML + CSSデザインの話ですので Web に詳しくない方、以下はおもしろくありません。あしからず。 ------------------------------------------------ CSSデザインを行う際、 テキストを箱で囲み、 その背景画像の大きさとテキストをバランスよく配置しつつ しかしテキストの分量は可変で考えたい場合 こういう手法を取ることがあります。 （文字の分量が増減するテキストの背景を指定する方法） 文字列の箱にでかい背景画像を指定するのではなく 箱をあえて二つの div に小分けし 別々の背景画像を充当する方法です。 増減する部分を {background-repeat : repeat-y;} と指定すれ
Webプログラマから見たiOS9 Safari9のCSS/JavaScriptなどの新機能解説 - Qiita
iOS9がリリースされ、iPhone6sも発売され、iOS9 Safari9で使える新機能をWebプログラマ目線で使ってみたいものをいくつか試してみました。iOSはアップデートの進捗がわりと良いので、新機能でもモバイルサイトであれば積極的に使える…はず。デスクトップ版の方は…お察しください。 ぶっちゃけ今回はそこまで目玉機能はなく、地味です。地味ですが、SafariでWebアプリを作れるようになりそうな気配がどことなくするようなしないような感じの内容です。残念ながらServiceWorkerには対応していないので、それに対応してくれたらもっとアレなんですが。 iOS Safari9の新機能（OSX版含む） CSS系 backdropフィルタ対応 新し目のiOSやOSXとかのメニューバーが半透過されるあれが作れます。要は背景要素に対してフィルタがかけられるプロパティです。綺麗で良いですね。
モバイル向けWebページでiFrameを使用する際のスクロール問題 | infoScoop開発者ブログ
infoScoopをタブレット対応させる際に、iFrame絡みのクロスブラウザ対策でハマったので、そのあたりの対策について紹介したいと思います。 サポートブラウザ 今回サポート対象となったブラウザ（OS）は以下になります。 Safari（iOS） Android Browser（Android） IE（Windowsタブレット） DOCTYPE宣言 HTMLの記述の前に、まずはDOCTYPE宣言です。 以下はHTML5のDOCTYPE宣言になります。 <!DOCTYPE HTML> 現状では何も宣言しないとブラウザのレンダリングモードは互換モードが選択されます。 また、互換モードに比べて標準モードの場合は記述が厳格になることもあり表示速度の向上も期待できます。 なので、モバイル向けにWebページを作成する際にはHTML5のDOCTYPE宣言をするようにしましょう。 iOSのiFrameにお
iPhone 5とiOS 6で導入されたWebデベロップまわりのアップデートについて - Branch
Clicking the “Branch this” button next to a post lets you start your own branch to talk about it. Branching a post is perfect for when you have something to say about someone’s post or want to go on a tangent—without taking the whole conversation off track. Join our beta so you can branch posts, too.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iPhone版Safariで文字サイズがおかしくなるときは-webkit-text-size-adjust: 100%; を指定する