はじめに
AppleのHuman Interface Guidelinesには、"Use an 8px-by-8px grid"という記載がある。
その対応策についての日本語の記事が見つけられなかったので、自分なりに探ってみた。
結果として、大した解決策を提示している訳ではないが、情報がないよりは良いと思う。
8px-by-8px gridとは
8の倍数でUIをレイアウトするグリッドを設定すること。以下のサイトがわかりやすい。
8の倍数でのブレークポイントとGrid Systemsの数学的アプローチ
iOSのスクリーンサイズ
しかし、現在（2019.4.8）主流のデバイスのスクリーンサイズは@1xで375*667ptである。Xのデバイスもそれぞれ8の倍数のスクリーンサイズとはなっていない。スクリーンサイズを改めて確認すると、iPhone 5までは、8の倍数だった(参考：The Ultimate Guide To iPhone Resolutions）。その名残で、今でも8px-by-8px gridを推奨しているのかもしれない。
対応策
対策としては、以下のサイトに記載されているように、基本的に8ptをベースにマージン等を設定して、あとは成り行きで良さそうだ。もっと良い方法があれば、ご教示ください。
Some screens have apparently difficult sizes to adjust for (the iPhone 6 is 375 x 667 points), but the solution is actually quite simple. Keep your padding and margin dimensions consistent and reduce/increase the size of the block element to fill the remaining space. It’s OK to have an oddly-sized element if it keeps the grid consistent. Keep in mind that your users will likely never see the actual measurements you use.
The 8-Point Grid