円を拡大してモバイル画面のサイズを変更する

Question

私は、ビューポート上のランダムな場所に円が現れ、画面全体がいっぱいになるまで拡大します。アニメーションはデスクトップ上では完璧ですが、拡大するサークルに対応するために、モバイルとスタッターで画面のサイズを変更します。必要に応じてサークルをビューポートから拡張したいアニメーションへ

リンク：https://rimildeyjsr.github.io/spotify-circle-animation/

私はoverflow-x : hidden;とoverflow-y : hidden;を削除しようとしたが、これは、ビューポートが吃音を引き起こします。

ご協力いただきまして誠にありがとうございます。

のjQuery：

var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; 
     function makeDiv(colorChoice){ 
      var divsize = 1000; 
      var color = colorChoice; 
      $newdiv = $('<div/>').css({ 
       'width':divsize+'px', 
       'height':divsize+'px', 
       'background-color': color, 
       'transform': 'scale(0)' 
      }); 

      var posx = (Math.random() * ($(document).width()) - (divsize/2)).toFixed(); 
      var posy = (Math.random() * ($(document).height()) - (divsize/2)).toFixed(); 
      $newdiv.css({ 
       'position':'absolute', 
       'left':posx+'px', 
       'top':posy+'px', 
       'border-radius':'50%', 
       'display':'none' 
      }).appendTo('body').addClass('animate').css({'display':'block'}).one(animationEnd,function(){ 
       $(this).remove(); 
      }); 
     }; 
     var id = setInterval(function(){makeDiv('black')},3000); 

CSS：

html,body { 
    padding : 0; 
    margin: 0; 
    height: 100%; 
    width: 100%; 
    overflow-y: hidden; 
    overflow-x: hidden; 
} 

.animate { 
    -webkit-animation: expand 2500s; 
} 

@-webkit-keyframes expand { 
    0%{ 
     -webkit-transform: scale(0,0); 
    } 

    100%{ 
     -webkit-transform: scale(100.0,100.0); 
     display: none; 
    } 
} 

Answer 1

（レイアウトが応答するために）、ビューポートメタタグを追加しようとdiv要素の幅1000pxを削除してください。

<meta name="viewport" content="width=device-width, initial-scale=1">