3840 x 2160解像度のテレビを1ページでサポートする方法、レスポンスレイアウト

いろいろ試してみましたが、パーセンテージにするとページ表示OKになりますが、フォントなどはちょっと異常なので、解像度を直接判断し、transform:scaleで倍数を拡大または縮小する方法で異なる解像度の適合を実現します.

(function($) {
    //        
    $.fn.scale = function(options) {
        var obj = this;
        var opts = $.extend({}, $.fn.scale.defaults, options);
        init(obj, opts);
        $(window).resize(function(event) {
            init(obj, opts);
        });
    };

    function init(obj, opts) {
        var w = $(window).width();
        var h = $(window).height();
        var obj_w = obj.width() + opts.offset * 2;
        if (w < opts.scale_w) {
            var xScale = w / obj_w; //    
            var yScale = xScale;
            //      
            obj.css({
                'transform': 'scale(' + xScale + ', ' + yScale + ')',
                'transform-origin': '0px 0px',
                /* IE 9 */
                '-ms-transform': 'scale(' + xScale + ', ' + yScale + ')',
                '-ms-transform-origin': '0px 0px',
                /* Safari   Chrome */
                '-webkit-transform': 'scale(' + xScale + ', ' + yScale + ')',
                '-webkit-transform-origin': '0px 0px',
                /* Firefox */
                '-moz-transform': 'scale(' + xScale + ', ' + yScale + ')',
                '-moz-transform-origin': '0px 0px',
                /* Opera */
                '-o-transform': 'scale(' + xScale + ', ' + yScale + ')',
                '-o-transform-origin': '0px 0px'
            });
        } else {
            obj.css({
                'display': ' block',
                'margin': '0 auto',
                'transform': 'scale(1, 1)',
                'transform-origin': '0px 0px',
                /* IE 9 */
                '-ms-transform': 'scale(1, 1)',
                '-ms-transform-origin': '0px 0px',
                /* Safari   Chrome */
                '-webkit-transform': 'scale(1, 1)',
                '-webkit-transform-origin': '0px 0px',
                /* Firefox */
                '-moz-transform': 'scale(1, 1)',
                '-moz-transform-origin': '0px 0px',
                /* Opera */
                '-o-transform': 'scale(1, 1)',
                '-o-transform-origin': '0px 0px'
            });
        }
    }
    //    defaults  
    $.fn.scale.defaults = {
        scale_w: 640, //       ,            
        offset: 20 //  padding  
    };
    //       
})(jQuery);

呼び出し方法:

var opts = {
    scale_w: 3840 + 20 * 2, //    ，           
    offset: 20
};
$(".test").scale(opts);