jQueryライブラリは、複雑でインタラクティブな動作を簡単に実装できるため、多くの方が利用されていると思います。

中でもスライド系のライブラリは、多くの種類が無料で提供されているので、色々なサイトで紹介もされています。

当サイトでは、トップページに「Slick Slider」を利用しているのですが、他にも「bxSlider」「MetaSlider」「FlexSlider」などがあります。

今回は、当サイトでSlickを使った時に発生した事例を紹介して、解決策をご案内したいと思います。

結論の解決策だけが気になる方は、「まとめ」 の項目をご覧下さい。

スマホで文字が大きくなってしまった！

普段は、bxSliderが使い慣れているのですが、今回はSlickを使ってスライダーを実装していました。

どちらのライブラリも画像のスライドだけでなく、コンテンツ（画像や文字など）のスライドも可能だったので採用しています。

今回、モバイルユーザービリティの問題があったので、CSSをイチから見直していたところ、スマホで縦横切り替えを行うと、スライドコンテンツ内の文字だけ大きくなってしまいました。

スライド以外の他のコンテンツは問題なく表示されているのですが、スライド内の文字だけというところが引っ掛かりますね。

CSS改修前と比較してみると…

文字の大きさに影響を及ぼす可能性のある箇所というのは、ある程度限定されるのですが、今回の場合は「jQuery」「CSS」のいずれかの可能性が考えられます。

そして、改修前は問題無かったものが、改修後に発生したということは、その時に触っていない箇所には問題無いと予想を立てます。

今回一番怪しいのは、CSSで文字サイズに関係する部分だろうと考え、改修前のソースコードと改修後のソースコードをにらめっこです！

メディアクエリによる文字サイズの切り替え自体は問題なく動作しています。

スマホで縦横切り替えて表示する際に、ブラウザ更新を行うと想定した文字サイズで正しく表示されます。

ということは、font-sizeプロパティの問題ではないかもしれません。

CSSで文字に関連するプロパティは、主に

• font-xxxxxプロパティ
• text-xxxxxプロパティ

の2つがあります。

他にも色々と文字を制御するプロパティはあるのですが、文字サイズに影響しそうなものの代表は、この2つです。

その辺りから探ってみると…ありました！

bodyセレクタに対して、-webkit-text-size-adjust: 100%;という設定が抜けていたことが原因でした。

解決に導いた「text-size-adjust」とは？

結論としては、bodyセレクタに対して、-webkit-text-size-adjustというプロパティの設定が抜けていたことが原因でしたが、このプロパティはどのような意味のものでしょうか？

まず、-webkit-という部分は、ベンダープレフィックスと呼ばれるもので、草案段階の機能やブラウザの種類によっては独自に実装している機能について、これが拡張機能であることを明示するための記述です。

次に、text-size-adjustの部分ですが、このプロパティは、一部のスマホ（モバイル端末）で実装されている文字サイズ自動調整機能を制御するものになります。

具体的には、スマホやタブレットを縦にしたり横にしたり切り替えた場合、画面の横幅に合わせて文字の大きさを自動的に調整するという機能がある場合、画面を横にすると文字を大きくして可読性を上げるようになっています。

そのため、この機能が有効になっていると、スマホを横から縦に切り替えた場合に、文字が大きくなり過ぎてしまう現象が発生してしまいます。

text-size-adjustプロパティは、文字拡大機能を制御するためのものですが、 Google ChromeやSafariでは、この文字拡大機能が有効になっているため、CSSで制御してあげる必要がありました。

それ以外のブラウザでは、文字拡大機能は実装されていないため、このプロパティは無視されます。

まとめ

今回、スマホを縦横切り替えた場合に発生した文字サイズが大きくなってしまう現象は、

「bodyセレクタに、-webkit-text-size-adjust: 100%;」と設定しておくことで解決できました。

解決に至るまでのプロセスは以下のとおりです。

1. 現象の確認（スマホを縦から横に切り替えたら、スライド内の文字だけ大きくなってしまう）
2. 現象から想定される可能性の洗い出し（「Slick Slider」かCSSに原因の可能性）
3. Slick周りの点検、CSS周りの点検（Slick自体には問題なし）
4. CSSソースコードの該当箇所を確認（改装前との比較）
5. 同様の事象が無いかネット検索（同事象と解決策を確認）
6. 修正及び動作確認（問題なし）

こんな感じで対応しました。

同じ現象に遭われた方は、ぜひ参考にしてみて下さいね。