복사버튼 모바일 버전에 맞게 크기조절 채택완료

 <div class="side">
                <input id="url_field" type="text" value="12345678901234567890" readonly="readonly"  style="color: #000;font-size: 
14px;border: 1px solid #d5dcde;border-radius: 1px;margin: -4px 0 0 2px;padding: 16px 100px 17px 100px;background: #f6f6f6;" size="40">
<input id="copy_btn" type="button" value="복사"class="used" style="color: #fff;font-size: 14px;border: 1px solid #007dc1;border-radius: 3px;margin: -4px 0 0 3px;padding: 15px 30px 17px 30px;background: #006db2;font: 12px, 굴림, Arial; cursor:pointer;">
                <script>
                var copyBtn = document.querySelector('#copy_btn');
                copyBtn.addEventListener('click', function () {
                var urlField = document.querySelector('#url_field');
                urlField.select();
                document.execCommand('copy'); // or 'cut'
                }, false);
                </script>
                </div>

pc에서는 잘나오는데  모바일 버전에서는 잘려서 나옵니다 이 문제를 해결할 방법이 있을까요??