136
75

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

iOS対応のWebサイトでは、「ページ下部の隅に追従するボタン」を置いてはいけない

Last updated at Posted at 2020-07-28

PCのレスポンシブレイアウトで動作確認を行っていて、実機での動作確認を怠っているとハマる罠
「ページ下端固定のボタン」の罠についてご紹介します。

iPhoneのMobile Safariにはデッドゾーンとか言われるものが存在します。
画面を下スクロールしてアクションバーを消えている状態で、下端をタップすると
「Safariのアクションバーを表示する操作」として認識されていまうのです。
そして、意図していたタッチイベントは発火しません。

ちょっと参考画像が縦に長いですがデッドゾーンがこんな風にあるイメージです。

IMG_0505-2.png

このアクションバーが現れるデッドゾーン、具体的には44pxらしいです。
さらに、iPhone X系などのホームボタンのない機種ではセーフゾーンなんかも現れて
当たり判定が奪われてしまうこともあるようです。

詳しいことはこの記事が詳しいです。
iOS Safariのアクションバー表示エリアはタップイベントをブロックする | Orime

このことを考えると、SP Web向けに行うUIデザインでは、
下端に追従するようなボタンを作るときは、少し下端を開けても成立するように
「丸の中にアイコン」とかにしてあげるとよいでしょう。

メジャーなサイトでよく見るあのボタン(Floating Actionボタンというそうです)には
こういったデバイス上の制限という合理的な理由もあるのですね。

136
75
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
136
75

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?