デザイナーがiPhone6(375px)基準のデザインをつくってきたとき

// http://www.bricoleur.co.jp/blog/archives/2985

import UA from './UA';
const ua = new UA();
const _ua = ua.get();

export default (() => {

    const SP_BASE_WIDTH = 375; // デザイナー作成サイズ
    const PC_MAX_WIDTH = 1280; // タブレット内に収めたいサイズ

    const ua = navigator.userAgent.toLowerCase();
    const isiOS = (ua.indexOf("iphone") > -1) || (ua.indexOf("ipod") > -1) || (ua.indexOf("ipad") > -1);
    const iOSviewportW = (isiOS) ? document.documentElement.clientWidth : 0;

    function updateMetaViewport(){

        const ww = (isiOS) ? iOSviewportW : window.outerWidth;
        let viewportContent;

        if (_ua.Tablet) {
            // タブレットの場合はpcを縮小した感じにする
            viewportContent = `width=${PC_MAX_WIDTH}, user-scalable=no, shrink-to-fit=no`;
        } else {
            // spの基準サイズ（デザイナー作成サイズ）以下はよしなに縮小する
            // ※ iphone7などのデザイナー作成サイズ以上のときも拡大表示したい場合は、
            //   条件分岐をなくし、width=デザイナー作成サイズ を適応する。
            viewportContent = (ww < SP_BASE_WIDTH)
                ? `width=${SP_BASE_WIDTH}, user-scalable=no, shrink-to-fit=no`
                : `width=device-width, user-scalable=no, shrink-to-fit=no` ;
        }

        document.querySelector("meta[name='viewport']").setAttribute("content", viewportContent);
    }

    window.addEventListener("resize", updateMetaViewport, false);
    window.addEventListener("orientationchange", updateMetaViewport, false);

    const evt = document.createEvent("UIEvent");
    evt.initEvent("resize", true, true);
    window.dispatchEvent(evt);

})();

@mixin media($width) {
  @media only screen and (max-width: $width + 'px') {
    @content;
  }
}

@mixin fixZoom() {

  $base: 375;
  $max: 600;
  $min: 320;
  $current: $max;

  $stride: 10;

  $flag: true;

  @while $current >= $min {

    @if $flag {
      @if $current < $base {
        @include media($base) {
          body{ zoom: 1.0 ; }
          $flag: false;
        }
      }
    }

    @include media($current) {
      body{ zoom: $current / $base ; }
      $current: $current - $stride;
    }

  }

}

import $ from 'jquery';

export default class {

    constructor(opts={}) {

        this.MAX_WIDTH = opts.MAX_WIDTH || 600;
        this.MIN_WIDTH = opts.MIN_WIDTH || 320;
        this.isSP = opts.isSP || false;

        this.initListener();

    }

    initListener() {

        $(window).on('load resize', () => {
            if (!this.isSP) return;
            this.changeScale();
        })

    }

    changeScale() {

        const ww = window.innerWidth;
        if ( ww >= this.MAX_WIDTH || ww <= this.MIN_WIDTH ) return;

        const BASE = 375; // zoom = 1.0
        $(document.body).css('zoom', ww / BASE * 1.0 )

   }

}