2013年7月19日金曜日

Freeway iOSの文字自動調整機能を無効化

mobail safariで表示される文字サイズがおかしい!(文字が大きくなってる)ということで調べてみたら、iOSには小さい文字を自動で大きくする機能が備わっていました。便利ではあるのですが、レイアウトが崩れてしまう面もあるので、これを無効化する方法を探してみました。
基本的にはCSSに

body {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -o-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

とすればいいのですが、PC版のsafariにおいてページの拡大/縮小において文字が大きくならなくなるようなので、iOSからのアクセスに限りスクリプトで実行させる方法もあるようです。


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

参考サイト
http://freefielder.jp/blog/2011/07/ios-safari-fontsize.html

0 件のコメント:

コメントを投稿