iOS版safariの「文字サイズ自動調整」がいやらしい。

ええと、

  • divやらspanやらに表示フォントサイズを指定してやるでしょ。
  • iPhoneのSafari（以下MobileSafari）から、そのページにアクセスするでしょ。
  • JavaScriptで、フォントサイズを規定したエリアの、実際の表示フォントサイズを取得してみる…
    document.defaultView.getComputedStyle( element , null ).fontSize で取得できますね。

…と、

スタイルで指定したフォントサイズと違うサイズが取得される！…という場合があります。これは MobileSafari の文字サイズ自動調整機能が働くからなのですね。

bodyのwidthが絶対値で指定されていた場合などは スタイルで規定したフォントサイズ == 実際に表示されるフォントサイズ になったりするるのですが、いろいろ挙動を調べてみると、この自動調整機能が発動する条件がよく判らん。調整が適用される要素と適用されない要素があったりして、これもよく判らん。ちゃんと仕様書を読めばいいのだけれど。

「レイアウトがズレるから、余計なことはしないでくれ」というときは、自動調整を無効にするスタイルプロパティを bodyに設定してしまいましょう。

body{
-webkit-text-size-adjust: none;
}
body{
-webkit-text-size-adjust: 100%;
}

これで、CSSで指定したとおりのフォントサイズで表示されるようになります。

【2013.07.29追記】
-webkit-text-size-adjust に設定する値は "none" ではなくて "100%" にすべきです。
値を "100%" に設定した場合、もしくはこの記事の初出時から WebKit が格段にアップデートされているために、この記事のこれより後の部分の記述は現状にそぐわないものになっている可能性があります。
記事内容を削除するのもアレなので、とりあえず初出時のまま残しておきます。

ただし、この -webkit-text-size-adjust にはバグがあって、

本来このプロパティは MobileSafari のみで働くものであるが、値を none に設定した場合、デスクトップのWebkit系ブラウザで「ページの拡大/縮小」をしても、テキストのサイズが変わらなくなる。
　　→ こちらの記事参照｜英語

…とのこと。

実際 Mac OS上の Safari や Google Chromeで試してみると（メニューバーの「表示」→「拡大」または「縮小」）、ページレイアウト自体は拡大/縮小するけれど、フォントサイズは変わらない。

アクセシビリティを考慮するならば、この拡大機能を殺してしまうのは避けたほうが良いのでしょうなぁ。というわけで、JavaScriptでMobileSafariからのアクセスかどうか判別して、MobileSafariからの場合にのみ、bodyのスタイルに -webkit-text-size-adjust: none; を付加してみる。

<script>
window.onload = function(){
  var ua = navigator.userAgent.toLowerCase();
  if( /mobile/.test( ua ) && /safari/.test( ua ) ){
    document.body.style.webkitTextSizeAdjust = 'none' ;
  }
} ;
</script>

こんな感じかな。超手抜きのブラウザ判定ですが。

カテゴリ:

タグ: