Help us understand the problem. What is going on with this article?

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

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

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

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

IMG_0505-2.png

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

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

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

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

studist
「伝えることを、もっと簡単に」をミッションにビジュアルSOPマネジメントプラットフォームのBtoB SaaS「Teachme Biz」を開発・運営するスタートアップ
https://medium.com/studist-dev
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした