パソコン / ホームページの作り方 　スマホページを作る(6)Chromeでは行間幅指定が必要 2020/6/21 ●モバイル フレンドリー テストでは行間が詰まって見える 　モバイル フレンドリー テストで、このサイトのページをテストしてみると、「このページはモバイルフレンドリーです」と表示されていますが、スクリーンショットでは、行間が詰まって見えます。ハイパーテキストで行間を指定していないので、その影響がでているのかもしれません。 ●Android版のChromeは、行間が狭め 　しかし、4インチのiPhoneでは、行間はかなり空いています。ブラウザは当然Safariです。 　5インチのAndroidスマートフォンの場合、ブラウザがFirefoxなら、行間は適切な幅に調整されています。 　しかし、Chromeでは、少し行間が詰まっています。Android版のChromeは、行間が狭めのようです。 ●スタイルシートで行間幅を指定 　そこで、スマホ用ページでは、次のようにスタイルシートで行間幅を指定しました。 <style> body { line-height: 150%; } </style> 　しかし、この指定はテーブル内には及ばないようなので、セル内に次のように行間を指定しました。 <style> td { line-height: 150%; } </style> 　すると、行間が広がりました。 　モバイル フレンドリー テストで、確認してみても行間は広がっていました。 　PC版のChromeでは行間は適切な幅に調整されますから、行間幅の指定が必要なのはスマホ版のChromeだけのようです。