モバイルでは、main-outlet ラッパーの自動マージンがここで解除されています。
これにより、テーマで -d-max-width が宣言されている場合にレイアウトが左揃えになります。狭いデバイスでは表示されませんが、タブレットの横向きモードでは問題となります。たとえば、Air テーマでは次のようになります。
この宣言は、次の理由で追加されたようです。
現在、トピックリストでは問題が見られないことが多いのですが、この宣言は削除してもよいでしょうか？または、特定のケースがある場合は、ブレークポイントに割り当てる方が良いでしょうか？
このルールは削除できると思います。カスタムテーマによってはモバイルで大きなマージンが発生する可能性がありますが、ほとんどのテーマは問題ないでしょう。
ただし、タブレットでモバイルビューが表示されている点に注意してください。これはもはやiPadのデフォルトではなく、iPadはデフォルトでデスクトップビューが表示され、モバイルのスタイルシートは読み込まれません。これはAndroidタブレットですか？
はい、それはAndroidのタブレットです。
タブレットで横向き（正直、縦向きでも）のブラウザにとって、モバイルユーザーエージェントにデフォルト設定するのは間違った選択だと、私は言いたくなります。これがChromeなのか他のブラウザなのかは分かりませんが、Chromeは場合によってはデスクトップモードにデフォルト設定されます：Chrome enables desktop mode by default on premium tablets | Blog | Chrome for Developers
iPadと Androidタブレットの両方で再現できますが、アスペクト比のせいでAndroidの方が悪いです。
モバイル設定で気に入っている点の一つは、サイドバーメニューがページに埋め込まれるのではなく、オーバーレイとしてスライドインすることです。私にとっては、モバイルデバイスでより「ネイティブ」に感じられます。
ブレークポイント宣言を追加するのはどうでしょうか？
@include breakpoint(mobile-extra-large) {
#main-outlet-wrapper {
margin-left: unset;
margin-right: unset;
}
}
これにより、狭いモバイルデバイスでは潜在的な余分なスペースが削除されますが、より広いデバイスではラッパーが中央揃えになります。
breakpoint(mobile-extra-large) オプションは私にとって理にかなっています。@awesomerobot さんがどう思うかも気になります。
いくつかの非常にカスタムなテーマを試しましたが、もうまったく必要ないと思います…追加されてから数か月後に、ラッパーは width: 100%; を持つグリッドに設定されたため、理論的には元の問題が発生するのを完全に防ぐことができるはずです。
ここで削除します
調査していただきありがとうございます！