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制作

Dreamweaver CC 2017で自動作成されるcssファイルを作らない方法

エディタをDreamweaver CC 2017に乗り換えて少し気になったことがあります。それはSa...

2017年3月23日

Web制作

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

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

2017年3月8日

Web制作

GoogleドキュメントOCRの力でサイト制作効率アップ!

こんにちは、丹羽です。サイト制作する際に、クライアントから支給された原稿がデータ化されていない場合や...

2023年7月20日

Web制作

共有レンタルサーバーが引き起こすリスク!IPブラックリスト問題とその解決策

新規契約したサーバー、ドメインなのにサイトが表示されない!!今回このような状況に陥ったので、原因究明...

2024年8月30日

Web制作

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

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

2024年1月9日

  • カテゴリー

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

    RELATED SITES

    関連サイト

    • SAKAMOTO Blog
    Designed by WEBLIC合同会社