- このトピックには13件の返信、2人の参加者があり、最後に
により5年、 8ヶ月前に更新されました。
-
投稿
-
【お使いの 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を付与する事で重なりを対策できる事のみは確認できました。
しかし、全体的な対策を何処に記述すれば上手く対策できるか等は解らなかったので、
もし、対応が可能でしたら、お願いいたします。いいねをした人: 居ません色々と私たちの制作チームでもお客さんに合わせて調整をしましたが、ややこしい問題でした。
- デバイスが、右に対して傾いているか、左に対して傾いているか、CSSだけでは取れない。
- 左右両方にpaddingを入れた場合は両方に適用されるのでpadding余白が大きく、中央にかなり寄ってしまう。
- 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); } }いいねをした人: 居ません情報共有ありがとうございます！ iOS だけに影響があるのかと思ってたのですが、Android や IE にも影響あるんですね…。
ちなみにですが、一度変数に入れてから
varで適用しているのはなぜでしょう？直接envやconstant当てると問題があるのでしょうか？なんかいっそ
viewport-fitなくしちゃったほうが良い気がしてきました…。いいねをした人: 居ませんちなみにですが、一度変数に入れてから var で適用しているのはなぜでしょう？直接 env や constant 当てると問題があるのでしょうか？
「変数に入れているのは、携帯端末の回転中に再計算するのを防止する為」と海外サイトでは記載されていました。
その為、そうしています。
（※ 再発動を変数に代入する事で防げるのかデバッグ確認でも出来ませんでしたので、本当は直接入れても大丈夫かも…）なんかいっそ viewport-fit なくしちゃったほうが良い気がしてきました…。
それも一度考えたのですが、将来的なことを考えると解決にならないので悩んでました。
ほとんどのウェブサイトではviewport-fitが無かったり、対策されていなかったり、
横向きでウェブページを見るユーザー数が低いとも言われていたりしますので、私の方で難しく考えすぎなのでしょうか…いいねをした人: 居ません試してみたのですが、
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にならないんですね。ノッチが右にある場合はドロワーの左余白が大きくなるのが悩ましい…。いいねをした人: 居ません実機でも大丈夫そうです！
これやってみて気づいたのですが、ノッチが右にあるときでも safe-area-inset-left は0にならないんですね。
そうなんですよね…
iPhoneだと角が丸いところまでの幅の値を取ってしまうのが原因で0にならなくて…。
Androidだとノッチの部分しか取らないので逆に0になってくれるのもあるみたいで。
私もこれが悩ましいです。
余白が大きくなっちゃうので、iPhoneでノッチの方向を取得する方法とかあれば良いのですが……いいねをした人: 居ません確認していただきありがとうございます！ あまりスタイル足しすぎると子テーマ等でデザインをカスタマイズしている方に影響がでちゃいそうなので、とりあえずこれで様子見しようと思います。情報提供ありがとうございました！
いいねをした人: 居ません申し訳ないですが、再度トピックを開きます。
padding-bottomが設定されていない為、下にノッチのある端末やiPhone XSだと最下部のメニューが角丸に隠れて見えない時が発生している問題が生じております。
footer-sticky-navで正しく上がっていますので、同じスタイルをドロワーメニューのpadding-bottomでも対応していただければ回避できるのではないかと思います。いいねをした人: 居ません
- トピック「iPhone Xシリーズのセーフエリアに対応されていない？」には新しい返信をつけることはできません。