WEBデザイン スクリプト

【疑似レスポンシブ】ウィンドウ幅に合わせてページ全体を縮小するJavaScript

2018年1月15日

このサイトにも使用していますが、ウィンドウの幅が規定値以下になったら
ウィンドウ幅に合わせてページ全体を縮小して、ウィンドウ内に収めるスクリプトです。
タブレットではPCと同じレイアウトで表示したいな~と思って作りました。
(ブラウザにより不具合あるかも・・・)

以下javascriptソース内、"1260" が既定のウィンドウ幅部分なのでサイトに合わせて修正します。

JavaScriptソース(Jquery使用)

$(function(){
    function bodyresize(){
        var value = $(window).width();
        //$('#debug').text(value);
        if(value > 1260||value <= 624){
            $('body').css("zoom",1);
        }else if(value <= 1260&&value > 624){
            w = value / 1260;
            $('body').css("zoom",w);
        }
    }

    $(window).load(function() {
    bodyresize()
    });

    $(window).resize(function() {
    bodyresize()
    });
});


-WEBデザイン, スクリプト

Copyright© MDBloG , 2020 All Rights Reserved Powered by AFFINGER5.