xshoji's blog

#CSS

2 posts tagged with CSS

Astro: iOS SafariのCTAバー問題で半日溶かした話

CTAバー。画面の下にぴったり張り付く「電話で相談」「Web相談」みたいなやつ。



これを実装していて、普通は position: fixed + bottom: 0 たったこれだけで終わるんですが、 iOS Safari で見たら、ボタンの下部分の領域の背景が透けて見えててしまっていた(↑の図の状態)。 参考にしてた別のサイトはきれいに表示されてるので絶対できるはずなのに、うちだけ透ける。なんで。

…で、ここからコストかけて Opus 4.6 に修正させまくったが、全然治らないやり取りが続くことになった。

続きを読む

Webページをスマホ向けのデザインに最適化する Bookmarklet

普段 iPhone を使っていて、Safari でブログをよく読むのですが、スマホ向けに最適化されていないページがまだ多く、見にくいと感じることがよくあります。 Safari には「リーダー表示」という機能があり、記事本文だけを抽出して見やすく表示できますが

iPhoneのSafariで記事を読んでいるときに気をそらすものを非表示にする - Apple サポート (日本)
https://support.apple.com/ja-jp/guide/iphone/iphdc30e3b86/ios

リーダー表示に対応していないページもあります。また、リーダー表示にしても、コードブロックや文中の変数のスタイルがわかりにくく、痒いところに手が届かないと感じることがあります。

そうした悩みがあり、スマホ向けに最適化されていないページを見やすくする Bookmarklet(ブックマークレット)を作成しました。 今回は作成した Bookmarklet の紹介と使い方を説明します。

続きを読む