jQueryを使ってスマートフォン向けにフォントサイズをリサイズ

cdbk.net CREATIVES のサイトをスマートフォンでも文字が読めるよう、フォントサイズを可変できるようなjQueryのスクリプトを入れたので紹介。

JavaScriptのソースをべた書きするとこんな感じ

$.browser.android = /android/.test(navigator.userAgent.toLowerCase());
$.browser.iphone = /iphone/.test(navigator.userAgent.toLowerCase());
$.browser.ipod = /ipod/.test(navigator.userAgent.toLowerCase());

function fontsizeset(){
        var defaultwidth = 480;//スマートフォンのデフォルト想定幅
        var fsize = 20;//デフォルトフォントサイズ

        var devicewidth = $(window).width();
        var docwidth = $(document).width();
        var deviceheight = $(window).height();
        var docheight = $(document).height();
        if(devicewidth>deviceheight){
        var resizelength = Math.round((deviceheight / defaultwidth ) * 100)/100;
        }else{
        var resizelength = Math.round((devicewidth / defaultwidth ) * 100)/100;
        }
        var newfsize = fsize * resizelength;
        if(( $.browser.android )||( $.browser.iphone )||( $.browser.ipod )){
        $("body").animate({"font-size": newfsize},"slow");
        }
}
$(document).ready(function(){
        $(window).bind('resize load', function(){
                fontsizeset();
        });
        $(window).load(function(){
                fontsizeset();
        });
});

タブレットでの表示は通常表示を前提に、スマートフォンで極端に小さくなってしまうフォントサイズを端末の幅に合わせて可変するスクリプト。

端末の表示幅は2011年春•夏に発売されている端末の多くが採用している480pxをベースに幅に合わせて指定しているフォントサイズが変更される仕組みにしています。また、横長にしたときは縦、横、短い方を基準にリサイズするようにしているので極端にサイズが大きくなることはないようになっています。

可変スクリプトを「ON」にした状態のサイトはこちら

今後、スマートフォンもHD対応のサイズが主流になりつつある中、端末に応じたCSSをかき分けるのも方法なのですが、こういった方法もあるということで紹介しました。

 

 

  • jQuery+Mobile+スマートフォンサイト+デザイン入門+(WEB+PROFESSIONAL)
  • Web制作の現場で使う+jQueryデザイン入門+(WEB+PROFESSIONAL)
  • JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまで
  • Webデザイナーのための+jQuery入門 魅力的なユーザーインターフェースを手軽に作る+(Books+for+Web+Creative)
  • jQueryデザインブック 仕事で絶対に使うプロのテクニック
  • JavaScript+%26+jQueryレッスンブック―最新jQuery対応
  • 10日でおぼえる+jQuery入門教室
  • jQuery+Mobile
  • jQueryクックブック

linked by blog-tools