スマホって案外むずい。
このホームページは、レスポンシブデザインということで、基本的にデスクトップで見ても、タブレットで見ても、スマホで見てもデザインが変わることはありません。
ただ、スマホだけはどうしても避けて通れない問題があります。それは、画面が小さいことと、縦長であるということ。
何が言いたいのかというと、横長のコンテンツは不必要に縮小されたり、圧縮されて見にくくなります。
その最たる例がテーブル（表）です。例を挙げます。
| あいうえおかきくけこさしすせそ | たちつてとなにぬねのはひふへほ | まみむめもやゐゆゑよらりるれろ | わをん。、！？＋ー＠＊？＞＜＃ |
|---|---|---|---|
| ABCDEFGHIJKLMNOPQRSTUVWXYZ | abcdefghijklmnopqrstuvwxyz | 1234567890987654321 | 一二三四五六七八九十 |
おそらく、全ての端末で、この表は本文のエリアから逸脱しているはずです。スマートフォンから見るとおそらく、右側に大きく膨らんでいるはず。これをどうにか解消したい。
ということで、修正しました。ってことで以下が修正版。
| あいうえおかきくけこさしすせそ | たちつてとなにぬねのはひふへほ | まみむめもやゐゆゑよらりるれろ | わをん。、！？＋ー＠＊？＞＜＃ |
|---|---|---|---|
| ABCDEFGHIJKLMNOPQRSTUVWXYZ | abcdefghijklmnopqrstuvwxyz | 1234567890987654321 | 一二三四五六七八九十 |
具体的な変更点を見ていきましょう。
/* スクロール可能なテーブルラッパー */
#main-content .table-scroll {
overflow-x: auto;
max-width: 100%;
}
.table-scroll{
border-collapse: collapse;
border-spacing: 0;
min-width: 200px;
margin: 0 auto;
width: max-content; /* 列に合わせて広がる */
}
/* テーブルの表示 */
#main-content table {
border-collapse: collapse;
border-spacing: 0;
min-width: 200px;
margin: 0 auto;
}
#main-content th {
padding: 5px 10px;
background: #f5f5f5;
border: solid 1px #ddd;
white-space: nowrap; /* 折り返さない */
}
#main-content td {
padding: 5px 10px;
border: solid 1px #ddd;
white-space: nowrap; /* 折り返さない */
}
#main-contentは、この本文部分をラップしている部分。.table-scrollはエリア内スクロールに対応させたいテーブルをラップするクラスです。
tdとthで、white-space: nowarap;とすることで、幅に合わせた無理な改行を防いでいます。
.table-scrollに指定したwidth: max-content;によって、横幅はコンテンツに合わせて表を拡大し、overflow-x: auto;ではみ出た部分の扱いを決定しています。
個人的にautoって便利だなぁとか思ってます。絶対に事故る原因になると思いますけどね。
別の問題
この実装をしている間に別の問題も発生しました。
今回のこれを実装しようと思ったきっかけは、この記事と同時に公開されているであろうUSBを理解するという記事に以下のようなテーブルを添付しました。
| 形状 | ピン数 ~USB 2.0 |
最大ピン数 USB 3.0~ |
特徴 |
|---|---|---|---|
| Standard A | 4 | 9 | 一般的なUSB形状。必ずホスト。 |
| Standard B | 4 | 9 | 一般的なUSB形状。必ず周辺機器。 |
| Type C | ~14 | 24※ | 2014年に策定されたUSB形状。ホスト・周辺機器は限定されない。裏表が関係ないリバーシブルデザイン。 |
| Mini-A | 5 | 10 | 小型のUSB形状。必ずホスト。 |
| Mini-B | 5 | 10 | 小型のUSB形状。必ずクライアント。 |
| Micro-A | 5 | 10 | Mini-Aよりも更に小型のUSB形状。必ずホスト。 |
| Micro-B | 5 | 10 | Mini-Bよりも更に小型のUSB形状。必ずクライアント。一般的に「マイクロUSB」とよばれる形状。 |
このテーブルの「特徴」の列の要素の文字だけが、iOSのSafariで大きくなるという問題です。さすがに謎だったので、ChatGPTに問い合わせてみると-webkit-text-size-adjustが悪さをしているという。なので、急遽#main-contentに対して-webkit-text-size-adjust: 100%;を追加して対応しました。
この-webkit-text-size-adjustあるいはtext-size-adjustについて調べてみました。
多くのウェブサイトは小型デバイスを想定して開発されていないため、モバイルブラウザはウェブページのレンダリング方法がデスクトップブラウザとは異なります。デバイス画面の幅に合わせてページをレイアウトするのではなく、通常800ピクセルまたは1000ピクセルといった、はるかに幅の広いビューポートを使用してレイアウトします。この超幅広レイアウトを元のデバイスサイズにマッピングするために、レンダリング全体の一部だけを表示するか、ビューポートを縮小してサイズを合わせます。
モバイル画面に合わせて縮小されたテキストは非常に小さくなる可能性があるため、多くのモバイルブラウザではテキストインフレーションアルゴリズムを適用してテキストを拡大し、読みやすくしています。テキストを含む要素が画面の幅の100%を占めている場合、このアルゴリズムはテキストサイズを拡大しますが、レイアウトは変更しません。このtext-size-adjustプロパティを使用すると、ウェブ制作者はこの動作を無効化または変更できます。小さな画面を想定して設計されたウェブページでは、この動作は必要ありません。
Mozillaによると「実験的な機能」だというのでCanIUseで検索をかけてみると、スマホ向けブラウザを中心に対応しているようです。実際、これがどのレベルで影響するのかはわかりません。
Androidデバイスを保有していませんので、Androidでどう動作するかはわかりませんが、一応text-size-adjustも同様にしておきました。
