スマホの実機でスワイパーの文字が大きくなる問題と解決方法

コーディングが終わり、テストサイトで実機テストをしたところ、アイフォンでだけ文字が大きくなるといった事態が起きました。

スワイパーを使ったスライドの中身だけが文字が大きくなっていたのです。

原因は、safariの独自挙動が問題で、小さな文字をユーザーが読みやすくするために大きくすることがあります。

ただ、サイトデザインの関係でそれが許容できない場合がほとんどだと思います。

一度、.swiperの中に以下のコードを入れてみて、だめだったら当記事内で僕が試したことを記しましたので見てください。

.swiper {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

何が起きたのか？スマホの実機でのみ文字が大きくなる

開発ツール上でちゃんとcss通りのスタイルがあたっているのに、実機だと文字サイズが大きくなる…

スワイパーのスライドテキストのみ発生しました。開発ツールで見てもしっかりスタイルはあたっていました🤔

おきた状況は以下のとおりです。

16pxの指定をしていたところ、23pxの大きさがあたっていた。
swiperのオプションloopを使って無限ループをしていた。
一周目の文字サイズが大きくなり、二周目からcssで指定したサイズになる。
pcの開発ツールやandroid機種でみると正常(cssで指定したスタイル)があたっている。
font-size以外はしっかりと機能している
swiper以外のfont-sizeは10pxでも出る。

原因がわからずに試したこと

原因がわからなかったため、単純に他のスタイルが上書きされていると考えました。

そのため、font-sizeに!importantをつけて解決…、と思いきやスタイルは変わらず。

- `.text-block` という共通クラスを作り、段落や見出しに一律のスタイルを適用
- `.swiper` や `.swiper-initialized` など、Swiperの状態に応じたセレクタにも同じスタイルを指定

```css
.text-block p,
.text-block h6 {
  font-size: 16px !important;
  text-align: center;
}

.swiper .text-block p,
.swiper .text-block h6,
.swiper-initialized .text-block p,
.swiper-initialized .text-block h6 {
  font-size: 16px !important;
}

次は、AIに聞きました。Claudeの回答。

Swiperライブラリが完全に初期化される前に初期表示が行われ、その後スライダーが1周するとJavaScriptによって適切なスタイルが適用される可能性があります。

// スライダーの初期化が完了した後に実行される関数
document.addEventListener('DOMContentLoaded', function() {
  // 全ての.text-blockの文字サイズを強制的に16pxに設定
  const textBlocks = document.querySelectorAll('.text-block p, .text-block h6');
  textBlocks.forEach(function(element) {
    element.style.fontSize = '16px';
  });

  // Swiperの初期化イベントにもリスナーを追加
  const mySwiper = document.querySelector('.swiper');
  if (mySwiper && mySwiper.swiper) {
    mySwiper.swiper.on('init', function() {
      const textBlocks = document.querySelectorAll('.text-block p, .text-block h6');
      textBlocks.forEach(function(element) {
        element.style.fontSize = '16px';
      });
    });
  }
});

swiperの読み込み順を変えようと言うものでした。それでも変わらず、だめでした。

同じ症状が出たというサイト

海外の質問掲示板に同様の症状が出たという書き込みがありました。

https://stackoverflow.com/questions/75723678/font-size-inside-swiper-slide-gets-bigger-only-on-mobile-device

質問者は、以下のような投稿を行っております。

「swiperを使ってスライダーを作成したところ、モバイル端末でのみ突然フォントサイズが大きくなってしまった。Chromeのモバイルモードやウィンドウをモバイルサイズに縮小しても問題は起きない。

スライダーを意図したUIにするためにはwidthを調整する必要がある。なぜでしょう？」

それに対する回答が

Swiperの中に長文があると、iPhoneのSafariだけ文字が勝手に大きくなる現象があって、それはSafariが「読みやすくするために」自動で拡大しているため、文字が大きくなるようです。

以下のCSSをSwiperのコンテナに書けば防げます。
.swiper {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

とのこと。safariの仕様で小さい文字が自動で大きくなるようです。

上記のcssは自動で文字サイズを変更するのを防いでくれるプロパティです。

ただ、僕の場合は上記ではうまく行かなったので以下の処理に変更&追加しました。

.swiper {
  font-size: 16px !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

<head>内に以下を変更

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

swiperのオプションに追加

observer: true,
observeParents: true,

このように、.swiperにスタイルを追加、headのviewportを変更、jsのswiperオプションにobserverを追加して解除できました！

実機でみて文字サイズが大きくなって困る…！といった方の参考になれば幸いです。