WEBLIC LLC

ブログ

iOS SafariでCSSのフォントサイズ効かない時に対処する方法

Web制作

2024年7月19日

css

ちゃんとCSSでフォントサイズを指定しているのに、なぜかiOSのSafariでフォントサイズが効かないってことはありませんか?

どういった条件でCSSが効かないのか

スマートフォンでは表示領域がPCと比べて狭いため、一般的に使われるテクニックとして、テーブルに横スクロールを実装して見やすくすることがあります。これを実装したタイミングで今回のフォントサイズが効かない現象がおきました。

フォントサイズが効かなかった条件は以下のとおりです。

  • テーブルセル内のフォントサイズ
  • white-spaceで nowrapを指定(折り返しさせない)
  • 画面幅以上の文字が入っている場合

実際の画面

3列目のセルだけフォントサイズが効いてない

解決方法

htmlに対して「-webkit-text-size-adjust: 100%;」を指定します。

html {
		-webkit-text-size-adjust: 100%;
	}

もしhtmlで効かなければtdに直接適応させてください。

td {
		-webkit-text-size-adjust: 100%;
	}

これでiOSのSafariでも問題なくCSSのフォントサイズを機能させることができます。

関連記事

Web制作

VirtualBoxでGuest Addsinionsをインストールしても画面サイズが変わらない場合の対処法

弊社の制作環境はMacで、制作したサイトのIEチェックはVMwareもしくはVirtualBoxにイ...

2017年3月8日

Web制作

さくらのレンタルサーバでWordPressのサイトをSSL化でつまずいたところ

今回新規でさくらのレンタルサーバ(スタンダード)+ラピッドの独自SSL(SNI SSL)を使ってWo...

2017年2月13日

Web制作

WebサイトにおけるUIとUXの違い

現代のデジタル時代において、Webサイトは企業の顔とも言える存在です。そのWebサイトの成功は、優れ...

2024年1月9日

Web制作

WordPressのContact Form 7にキャプチャを導入する方法

昨年末あたりからWEBLICのサイトのお問い合わせフォームからちょくちょくスパムが届くようになり困っ...

2017年1月12日

Web制作

メイリオフォントはCSSでイタリックが効かない!

先日ある案件でデバイスフォントを斜体にする必要がありました。普段は何も気にせずCSSでイタリックを設...

2017年4月3日

  • カテゴリー

  • 本日、 4人が閲覧しました

    RELATED SITES

    関連サイト

    • SAKAMOTO Blog
    Designed by WEBLIC合同会社