ANTON072
2/12/2015 - 10:01 AM

viewportをremで擬似的に調整する http://bl.ocks.org/ANTON072/raw/a8416ea8cdd09742bad4/

viewportをremで擬似的に調整する http://bl.ocks.org/ANTON072/raw/a8416ea8cdd09742bad4/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css">
  <style>
    *,
    *:before,
    *:after {
      box-sizing: border-box;
    }
    html {
      height: 100%;
    }
    body {
      background: #CCC;
      height: auto;
      min-height: 100%;
      font-size: 1rem;
      visibility: hidden;
    }
    h1 {
      margin: 0;
      padding: 2rem 1.2rem;
    }
    .max {
      width: 100%;
      height: auto;
    }
    .frame-all {
      width: 32rem;
      margin: 0 auto;
      background: white;
      height: 100%;
    }
    .frame-all > .inner {
      padding: 2rem 1.2rem;
    }
    p {
      font-size: 1.4rem;
    }
    canvas {
      background: #EEE;
    }
  </style>

</head>
<body>

  <div class="frame-all" id="all">
    <h1>FitView</h1>
    <canvas id="canvas" width="640" height="480"></canvas>
    <div class="inner">
      <p>Lorem ipsum Sit cupidatat deserunt non dolor incididunt Ut dolore cupidatat veniam deserunt laboris magna veniam sit ut enim ut adipisicing Duis officia quis culpa pariatur esse in mollit.</p>
      <p><img src="http://passpo.s3.amazonaws.com/fit-view/images/photo.jpg" height="427" width="640" alt="" class="max"></p>
      <p>Lorem ipsum Cillum ex dolor aliquip aliqua quis ullamco ad fugiat magna pariatur ea dolore ex deserunt pariatur amet dolore aliquip est cillum eu amet consequat ut labore ad deserunt qui fugiat enim minim veniam culpa enim consectetur.</p>
      <p>Lorem ipsum Cillum ex dolor aliquip aliqua quis ullamco ad fugiat magna pariatur ea dolore ex deserunt pariatur amet dolore aliquip est cillum eu amet consequat ut labore ad deserunt qui fugiat enim minim veniam culpa enim consectetur.</p>
    </div>
  </div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="https://code.createjs.com/createjs-2014.12.12.min.js"></script>
  <script>
    window.onload = function() {
      setTimeout(function(){
      var ua = navigator.userAgent.toLowerCase();
      var baseWidth = 320;
      var baseFz = 62.5;
      var ratio;
      if (/iphone/.test(ua) || /android/.test(ua)) {
        ratio = $(window).width() / baseWidth * baseFz;
      }
      else {
        ratio = baseFz * 2;
      }
      document.getElementsByTagName('html')[0].style.fontSize = ratio + '%';
      $('body').css('visibility', 'visible');

      var canvas = document.getElementById('canvas');
      var stage = new createjs.Stage(canvas);

      $('#canvas').css({
        width: $('#all').width(),
        height: $('#all').width * 0.75
      });

      var baseShape = new createjs.Shape();
      baseShape.graphics
        .beginFill('#000000')
        .drawRect(0, 0, canvas.width, canvas.height);
      stage.addChild(baseShape);

      var circle = new createjs.Shape();
      circle.graphics
        .beginFill('red')
        .drawCircle(0, 0, 100);
      stage.addChild(circle);

      var loader = new createjs.LoadQueue(false);
      var bitmap;
      loader.addEventListener('fileload', function(e){
        var bitmap = new createjs.Bitmap(e.item.src);
        bitmap.regX = e.result.width / 2;
        bitmap.regY = e.result.height / 2;
        bitmap.x = 640 - e.result.width / 2;
        bitmap.y = e.result.height / 2;
        bitmap.scaleX = bitmap.scaleY = 0.3;
        stage.addChild(bitmap);
        setTimeout(function(){
          createjs.Tween.get(bitmap).to({x: 200, y: 200, scaleX:1, scaleY: 1}, 800, createjs.Ease.getPowIn(2.2));
        }, 1000);
      });
      loader.loadManifest([{src: 'http://passpo.s3.amazonaws.com/fit-view/images/thumb.jpg'}]);

      setTimeout(function(){
        createjs.Tween.get(circle).to({x: canvas.width / 2, y : canvas.height / 2}, 800, createjs.Ease.getPowIn(2.2));
      }, 2000);

      createjs.Ticker.setFPS(60);
      createjs.Ticker.addEventListener('tick', function(){
        stage.update();
      });
      }, 0);
    };
  </script>
</body>
</html>