Bambi's BLOG @ hatena

ブログ運営 カスタマイズ テーマ制作 アフィリエイト いろいろ (ずぼらでも頑張るブログ)

iPhone X で固定フッターやボトムメニューが被る時の対処法

★今日はブログやサイトのiPhone X対応に関して★

  

実は遅まきながら…つい先日iPhone6sから→iPhone XSに機種変したんです。


それで自分のサイトを見てみたら、

がーん!!!

被ってんじゃん!!!

 

f:id:zuboraca:20181019123942j:plain

 

せっかく気に入って設置していた、自作のスマホ用のボトムメニューに画面下のバーが被ってしまい見えなくなっちゃっています...

 

それに、角も丸まっているので、そこに何か表示している場合は見えなくなっちゃう可能性もあると言うわけです!

↓↓この両端の丸っこいところね。

f:id:zuboraca:20181019123804j:plain


「iPhone X」が発売されてからもう既に1年も経っていて、お仕事でWEBサイトを作っている方から言わせれば「え?今更?」感は否めないものの、検索してもアプリ用の「Xcode」や「javascript」を使ったすっごい難しいやり方しか出てこなくて、困っていましたが(検索能力が無いだけかも知れないけど)

javascriptとか面倒な計算とかもさせずに、
コードを2つ加えるだけ

で解決できる方法を見付けちゃったので共有します!


参考にしたサイトは↓↓こちら(英語サイト)
Designing Websites for iPhone X | WebKit

 

ちなみに、私が作った、はてなブログテーマ「Palette(パレット)」を使用している方は、予めCSSにコードを組み込んでいるので、
コードを一つ追加するだけでOKです♪♪
こちらでやり方を説明しています♡
↓↓
テーマ「Palette」を使っている人はMETAコード1つだけ!

 

では、順を追って説明していきます。
説明は分からなくても大丈夫です!

要はコード2つを追加するだけ♪♪

 

CSSで画面の被りを解消する方法

 

「iPhone X」の画面の構造

難しいことは抜きにして(というか、実は私も良くわかっていないので...)まずは「iPhone X、Xs」の画面の構造について、簡単に説明します。

 

「iPhone X」から全画面表示になりましたね。
左側がiPhone Xsで、右側がiPhone8です。

f:id:zuboraca:20181019124300j:plain

(Appleのサイトから)
iPhone XS - Display - Apple


iPhone8では、画面の周りに「枠」があるのに対し、iPhone Xs(X)では、ホームボタンもなくなって画面がめいっぱいに広げられて端っこまで画像が見ています。

これ自体は大きくて見やすくて良いですよね(^-^)

だけど、ホームボタンがなくなった代わりに、このホームバー?が出てきて、固定で表示しているフッターやメニューに被ってしまうという現象が起きてしまいました。

f:id:zuboraca:20181019123942j:plain

 

 

セーフエリアの考え方

そんな現象に対応するために、Appleでは、重要な内容が見えなくなったり、アプリ内のボタンなどとホームバーが被らないように「セーフエリア」という考え方を導入しました。

f:id:zuboraca:20181019154721j:plain

Designing Websites for iPhone X | WebKit

ページを全てこの「セーフエリア」に収めてしまうと、せっかくの大画面の意味がないので、背景色や背景画像などは全画面で表示しつつも、ユーザーにとって大切なものやクリックするボタンなどは「セーフエリア」に納めてくださいね!と言う考え方です。

 

では、固定フッターやボトムメニューを「セーフエリア」内に納める簡単な方法とは?

 

①METAタグで「セーフエリアあるよ」と教える!

 
まずは、iOS11から対応した"viewport-fit"という画面の挙動をコントロールするMETAタグを使います。
なんのこっちゃ?だけど...
「iPhone Xの場合は、セーフエリアあるから対応よろしくね!」と言う呪文だと思ってください。
その呪文がこちら↓↓
 

以下のMETAタグ(呪文)を<head>~</head>内に挿入してください。

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

 

 

※はてなブログをお使いの方は↓↓ここにコピペする

設定→詳細設定→headに要素を追加

f:id:zuboraca:20181019160422j:plain

 

f:id:zuboraca:20181019160438j:plain

(※テーマ「Palette」をお使いの場合は↑↑こちらのタグのコピペだけでOKです♪) 

 

 

②簡単!CSSでセーフエリアまで底上げすれば良い

 

次に、セーフエリアまでの距離を取得するには env( )という関数を使います。
関数と言うと難しく聞こえますが、(私だけ?汗…)
CSSに追加するだけで勝手にやってくれるので、何も考えなくて大丈夫!
こちらもまた違うもう一つの別の呪文だと思ってください(笑)

 

セーフエリアから画面ボトムまで(下の端)までの距離は、この呪文↓

env(safe-area-inset-bottom)

※これがそのまま値にるので、あとは対応するセレクタにpadding-bottomでセーフエリアまでの距離を指定するだけ。

つまり、この分だけ底上げすると言う意味です。
↓↓

f:id:zuboraca:20181019162319j:plain

 

セレクタ名はそれぞれなので、ご自身の設定しているボトムメニューや固定フッターのセレクタで設定してください。

例えば「#bottom-menu」だったら下記のようになります。

#bottom-menu{
      padding-bottom: env(safe-area-inset-bottom);
}

 

はてなブログの人は、デザイン→カスタマイズ(スパナマーク)→{}デザインCSSで指定できます。
※ここは「#bottom-menu」などのセレクターが人それぞれ違うので、自分のボトムメニューで使っているセレクターを調べて変える必要があります。

 

私が作成した「はてなブログ」のテーマ「Palette(パレット)」をお使いの場合は、予めテーマのCSSに上記の呪文を組み込んだので、上記のCSSを追加する必要はありません!!

テーマ「Palette」をお使いの場合は、METAタグの挿入だけで大丈夫です♪♪

 

宣伝♡
ちなみに、当ブログで使用しているオリジナルテーマはテーマストアからダウンロード出来ます!

Palette (パレット) - テーマ ストア


シンプルですが、色々なカスタマイズがコピペだけで簡単にできます!
詳細はぜひこちら確認してみてください↓↓♪(^0^)

はてなブログ テーマ「Palette(パレット)」について 

f:id:zuboraca:20181012101439j:plain


 

以上、本日は

iPhone X で固定フッターやボトムメニューが被る時の対処法

をお伝えしました(^-^)

 

by Bambi