非レスポンシブなデザインをスマホ幅にあわせるいくつかの方法

2019-04-24
Web制作

時には、レスポンシブでは再現できないデザインを支給されることがあります。

残念ながら%では表現できないので、px単位で調整するしかありません。
そのデザインを複数のデバイス幅にあわせるには、どんな方法が良いでしょう？

viewportでwidthを指定する

真っ先に思いつくのがviewportです。これで対応可能であれば、使いましょう。

<meta name="viewport" content="width=750">

対応端末の範囲にあるAndroidで想定通り動かない場合、すでに決まったviewportを使用しなくてはいけない場合、別の方法にします。

CSSとJavaScriptで拡大縮小させる

やはり、JavaScriptで拡大縮小率を出して、CSSに適用させるのが現実的です。
使えるプロパティは2つあります。

zoomを利用する

非標準のプロパティですが、モバイル標準ブラウザであれば、だいたい使えます。

window.addEventListener('resize', function() {
    Array.prototype.slice.call(document.querySelectorAll('.target'), null)
    .forEach(function (value, index) {
        value.style.zoom = document.documentElement.clientWidth / 750;
    });
});
window.dispatchEvent(new Event('resize'));

ネイティブだと色々と長くなりますが、jQueryなら楽です。

$(window).on('resize', function() {
    $('.target').css('zoom', $(window).width() / 750);
}).trigger('resize');

注意

文字の最小サイズが設定されているのか、小さい文字が忠実に縮小されないです。
非標準なプロパティなので、再現できないブラウザがあることを頭に入れておきましょう。

transformを利用する

transformも原理は同じで、jQueryならprefixも不要です。

$(window).on('resize', function() {
    $('.target').css('transform', 'scale(' + $(window).width() / 750 + ')')
}).trigger('resize');

リサイズするコンテンツには、これを入れておきます。

-webkit-transform-origin: left top;
        transform-origin: left top;

注意

transformは、コンテンツが拡大縮小しても元は変わらないので、工夫が必要です。

横幅を基本にして拡大縮小させるはずですが、そうすると高さが大きすぎたり、足りなかったりするので、高さを指定して対応します。

$(window).on('resize', function () {
    var $target = $('.target'),
        scalePop = $(window).width() / 750,
        objHeight = $target.height() * scalePop;

    $target
    .css('transform', 'scale(' + scalePop + ')')
    .css('height', objHeight);

}).trigger('resize');