iPhone Xシリーズのセーフエリアに対応されていない?

0
いいねをした人: 居ません
  • このトピックには13件の返信、2人の参加者があり、最後にHatsukiにより5年前に更新されました。
14件の投稿を表示中 - 1 - 14件目 (全14件中)
  • 投稿者
    投稿
  • #10630
    Hatsuki
    閲覧者
    6

    【お使いの Snow Monkey のバージョン】v5.1.1
    【お使いのブラウザ】Safari(iPhone XS)
    【当該サイトのURL】Snow Monkeyでトグルメニューを使っている全てのサイトと思われます


    ※ スクリーンショットは、iPhone実機ではセンサーハウジング(ノッチ)が撮影されないので、Xcodeに付属されているiOS シミュレータのSafariで撮っています。

    iPhone Xなどで、ランドスケープ(横向き)での閲覧時に、トグルメニューの見え方がノッチのせいで、残念なことになっていましたので不具合として報告いたします。

    コンテンツの方は、マージンが取られているので文字がギリギリ切れずに見えているようです。
    しかし、もう少しゆったりとした余白があれば良いかもしれません。

    iPhone XSをお持ちでない場合は、Mac OS Xの場合のみとなりますが、Xcodeに付属されているiOS シミュレータのSafariでiPhoneを所持されていなくても、ご確認が可能と思います。

    セーフゾーンの対策参考にしたサイト:

    上記を参考に、envを付与する事で重なりを対策できる事のみは確認できました。
    しかし、全体的な対策を何処に記述すれば上手く対策できるか等は解らなかったので、
    もし、対応が可能でしたら、お願いいたします。

    0
    いいねをした人: 居ません
    #10656
    キタジマ タカシ
    参加者
    2227

    あ…縦向きのときの固定フッターについては対応してたかと思いますが、横向きは対応させてなかったかもです…。確認しますね。

    0
    いいねをした人: 居ません
    #10680
    Hatsuki
    閲覧者
    6

    色々と私たちの制作チームでもお客さんに合わせて調整をしましたが、ややこしい問題でした。

    1. デバイスが、右に対して傾いているか、左に対して傾いているか、CSSだけでは取れない。
    2. 左右両方にpaddingを入れた場合は両方に適用されるのでpadding余白が大きく、中央にかなり寄ってしまう。
    3. envだけではAndroid等で一部対応されず、またIE時等にCSS解釈が正しく行われない。

    3の項もある為に、@supportsで対応する形をとりました。
    また、2の項から、通常の場合、メニューは左に出るので、padding-bottomと、padding-leftに対して対策をすれば良いようです。
    1の項に関しては、leftとrightは縦表示の場合は、leftとrightは0で返却され、topに関しては、iPhoneの場合は0ですがAndroidの場合は機種によってノッチのピクセル分の数字が返される場合があるようです。これによりトグルメニューの一番上の項目がAndroidの場合めり込んでしまう機種も存在していますのでpadding-topで対応した方が良いようです。

    しかし、padding分はメニュー幅が小さくなるので、ちょっと悩ましい問題です。
    また、メニュー以外のコンテンツの場合、フル幅などの対応をどうしたら良いのかは悩み所です。
    l-containerにpaddingを設けて対応するのが良いでしょうか?

    メニューの対策については、その対策情報を勝手ながら下記に共有します。
    ご参考になれば幸いです。よろしくお願いします。

    
    /* 通常の場合はpaddingを0に設定しておきます。drawer-navに設定しているのはエリア全体に掛ける為です */
    #drawer-nav {
    padding-top: 0;
    padding-left: 0;
    padding-bottom: 0;
    }
    
    /* iOS11.0-11.2対応(旧Androidも) */
    @supports (padding-left: constant(safe-area-inset-left)) {
    #drawer-nav {
    --safe-area-inset-left: constant(safe-area-inset-left);
    padding-left: var(--safe-area-inset-left);
    }
    }
    @supports (padding-top: constant(safe-area-inset-top)) {
    #drawer-nav {
    --safe-area-inset-top: constant(safe-area-inset-top);
    padding-top: var(--safe-area-inset-top);
    }
    }
    @supports (padding-bottom: constant(safe-area-inset-bottom)) {
    #drawer-nav {
    --safe-area-inset-bottom: constant(safe-area-inset-bottom);
    padding-bottom: var(--safe-area-inset-bottom);
    }
    }
    
    /* iOS11.2以降(Android 4系対応) */
    @supports (padding-left: env(safe-area-inset-left)) {
    #drawer-nav {
    --safe-area-inset-left: env(safe-area-inset-left);
    padding-left: var(--safe-area-inset-left);
    }
    }
    @supports (padding-top: env(safe-area-inset-top)) {
    #drawer-nav {
    --safe-area-inset-top: env(safe-area-inset-top);
    padding-top: var(--safe-area-inset-top);
    }
    }
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
    #drawer-nav {
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    padding-bottom: var(--safe-area-inset-bottom);
    }
    }
    
    0
    いいねをした人: 居ません
    #10682
    キタジマ タカシ
    参加者
    2227

    情報共有ありがとうございます! iOS だけに影響があるのかと思ってたのですが、Android や IE にも影響あるんですね…。

    ちなみにですが、一度変数に入れてから var で適用しているのはなぜでしょう?直接 envconstant 当てると問題があるのでしょうか?

    なんかいっそ viewport-fit なくしちゃったほうが良い気がしてきました…。

    0
    いいねをした人: 居ません
    #10698
    Hatsuki
    閲覧者
    6

    ちなみにですが、一度変数に入れてから var で適用しているのはなぜでしょう?直接 env や constant 当てると問題があるのでしょうか?

    「変数に入れているのは、携帯端末の回転中に再計算するのを防止する為」と海外サイトでは記載されていました。
    その為、そうしています。
    (※ 再発動を変数に代入する事で防げるのかデバッグ確認でも出来ませんでしたので、本当は直接入れても大丈夫かも…)

    なんかいっそ viewport-fit なくしちゃったほうが良い気がしてきました…。

    それも一度考えたのですが、将来的なことを考えると解決にならないので悩んでました。

    ほとんどのウェブサイトではviewport-fitが無かったり、対策されていなかったり、
    横向きでウェブページを見るユーザー数が低いとも言われていたりしますので、私の方で難しく考えすぎなのでしょうか…

    0
    いいねをした人: 居ません
    #10812
    キタジマ タカシ
    参加者
    2227

    試してみたのですが、 viewport-fit を無くすのもそれはそれでちょっと問題がありそうだったので、 viewport-fit は残して、次の CSS を足してみました。

    @supports (max-width: calc(100vw - constant(safe-area-inset-right) - constant(safe-area-inset-left))) or (max-width: calc(100vw - env(safe-area-inset-right) - env(safe-area-inset-left))) {
      .#{$_prefix}c-fluid-container,
      .#{$_prefix}c-container {
        margin-right: auto;
        margin-left: auto;
        max-width: calc(100vw - constant(safe-area-inset-right) - constant(safe-area-inset-left));
        max-width: calc(100vw - env(safe-area-inset-right) - env(safe-area-inset-left));
      }
    
      .#{$_prefix}c-container {
        @include _media-min(lg) {
          max-width: calc(#{$_container-max-width} - constant(safe-area-inset-right) - constant(safe-area-inset-left));
          max-width: calc(#{$_container-max-width} - env(safe-area-inset-right) - env(safe-area-inset-left));
        }
      }
    }
    
    @supports (padding-left: constant(safe-area-inset-left)) or (padding-left: env(safe-area-inset-left)) {
      [id="drawer-nav"] {
        padding-left: constant(safe-area-inset-left);
        padding-left: env(safe-area-inset-left);
        width: calc(#{$_base-line-height * 10} + constant(safe-area-inset-left));
        width: calc(#{$_base-line-height * 10} + env(safe-area-inset-left));
      }
    }

    ざっと iOS シミュレーターで確認した感じでは大丈夫そうでしたが、どうですかね。

    これやってみて気づいたのですが、ノッチが右にあるときでも safe-area-inset-left は0にならないんですね。ノッチが右にある場合はドロワーの左余白が大きくなるのが悩ましい…。

    0
    いいねをした人: 居ません
    #10817
    Hatsuki
    閲覧者
    6

    実機でも大丈夫そうです!

    これやってみて気づいたのですが、ノッチが右にあるときでも safe-area-inset-left は0にならないんですね。
    そうなんですよね…
    iPhoneだと角が丸いところまでの幅の値を取ってしまうのが原因で0にならなくて…。
    Androidだとノッチの部分しか取らないので逆に0になってくれるのもあるみたいで。
    私もこれが悩ましいです。
    余白が大きくなっちゃうので、iPhoneでノッチの方向を取得する方法とかあれば良いのですが……

    0
    いいねをした人: 居ません
    #10819
    キタジマ タカシ
    参加者
    2227

    確認していただきありがとうございます! あまりスタイル足しすぎると子テーマ等でデザインをカスタマイズしている方に影響がでちゃいそうなので、とりあえずこれで様子見しようと思います。情報提供ありがとうございました!

    0
    いいねをした人: 居ません
    #10865
    キタジマ タカシ
    参加者
    2227

    Snow Monkey v5.1.2 で修正しました。

    0
    いいねをした人: 居ません
    #10874
    Hatsuki
    閲覧者
    6

    修正の確認をいたしました。
    iOS11.2以前やiOS現行、Androidの所持機種で問題なさそうです!
    ありがとうございます。

    0
    いいねをした人: 居ません
    #10925
    Hatsuki
    閲覧者
    6

    申し訳ないですが、再度トピックを開きます。

    padding-bottomが設定されていない為、下にノッチのある端末やiPhone XSだと最下部のメニューが角丸に隠れて見えない時が発生している問題が生じております。
    footer-sticky-navで正しく上がっていますので、同じスタイルをドロワーメニューのpadding-bottomでも対応していただければ回避できるのではないかと思います。

    0
    いいねをした人: 居ません
    #11075
    キタジマ タカシ
    参加者
    2227

    ぐわーそうか、そういうパターンもありますね。。修正します。

    0
    いいねをした人: 居ません
    #11295
    キタジマ タカシ
    参加者
    2227

    v5.1.4 で修正してみました!

    0
    いいねをした人: 居ません
    #11317
    Hatsuki
    閲覧者
    6

    確認が遅れまして、申し訳ありません。
    下部のノッチにも、きちんと重ならずに表示されてました!
    ノッチに触れるとブラウザが戻ってしまう機種の煩わしさが減って快適に正しくメニュー先へ行くことが出来ています。
    当トピックでも度々の報告に対して対応いただき、ありがとうございました。

    0
    いいねをした人: 居ません
14件の投稿を表示中 - 1 - 14件目 (全14件中)
  • トピック「iPhone Xシリーズのセーフエリアに対応されていない?」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。