PCサイトにおいて画面全体の拡大・縮小を行う方法だが、jQueryを使って、CSSのzoom属性を変化させる方法がある。

$(‘body’).css(‘zoom’,’150%’);

この方法のブラウザ対応は以下の通り

・WIN chrome52.0 => OK
・WIN Opera39.0 => OK
・WIN IE11 => OK（canvasの拡縮に問題があった）
・WIN safari5.1 => OK
・WIN Firefox48.0 => NG

・MAC Safari9.1 => OK
・MAC Chrome52.0 => OK
・MAC Firefox47.0 => NG

Firefoxがだめだ。CSS３を使う方法もある。

var rate = 1.5;
$(‘body’).css( ‘-ms-transform-origin’, ‘left top’ );
$(‘body’).css( ‘-webkit-transform-origin’, ‘left top’ );
$(‘body’).css( ‘transform-origin’, ‘left top’ );
$(‘body’).css( ‘-ms-transform’, ‘scale(‘ + rate + ‘,’ + rate + ‘)’ );
$(‘body’).css( ‘-webkit-transform’, ‘scale(‘ + rate + ‘,’ + rate + ‘)’ );
$(‘body’).css( ‘transform’, ‘scale(‘ + rate + ‘,’ + rate + ‘)’ );

これで全ブラウザをカバーできた。

・WIN chrome52.0 => OK
・WIN Opera39.0 => OK
・WIN IE11 => OK
・WIN safari5.1 => OK
・WIN Firefox48.0 => OK

・MAC Safari9.1 => OK
・MAC Chrome52.0 => OK
・MAC Firefox47.0 => OK