북마크스크립트 - 모바일 반응형 페이지 보기

컴퓨터활용/html, css , js

북마크스크립트 - 모바일 반응형 페이지 보기

윤컴 2023. 4. 28. 10:05

728x90

안녕하세요 이번 포스팅은 데스크탑 환경에서 모바일 페이지를 확인할때, 화면이 100퍼센트 비율로 보여지므로 읽기 힘든 경우가 있습니다. 이럴때 모바일 반응형 미리보기 북마크 스크립트를 이용하여, 간단히 모바일 페이지를 확인해 보실 수 있습니다.

자 그럼 직접 등록하여 확인해 볼까요?

1. 북마크스크립트 등록

아래 스크립트를 복사해서 북마크 등록 후 URL영역에 붙여 넣어주세요.

자세한 등록 방법은 이전 포스팅을 참고 해주세요 : [웹페이지에서 outline 그려주기]

javascript: (function() {var d = document; if (d.getElementById('ifm_wrap')) {alert('이미 실행중입니다.'); return false; } var html = ''; html += '<!doctype html>'; html += '<html lang="en">'; html += '<head>'; html += '<meta charset="UTF-8">'; html += '<title>반응형 테스트</title>'; html += '<style>'; html += 'iframe::-webkit-scrollbar {'; html += 'width: 0px;'; html += 'height: 10px;'; html += '}'; html += 'html,body{margin:0;padding:0;background: transparent url("data:image/gif;base64,R0lGODlhZABkAPcAAP//////zP//mf//Zv//M///AP/M///MzP/Mmf/MZv/MM//MAP+Z//+ZzP+Zmf+ZZv+ZM/+ZAP9m//9mzP9mmf9mZv9mM/9mAP8z//8zzP8zmf8zZv8zM/8zAP8A//8AzP8Amf8AZv8AM/8AAMz//8z/zMz/mcz/Zsz/M8z/AMzM/8zMzMzMmczMZszMM8zMAMyZ/8yZzMyZmcyZZsyZM8yZAMxm/8xmzMxmmcxmZsxmM8xmAMwz/8wzzMwzmcwzZswzM8wzAMwA/8wAzMwAmcwAZswAM8wAAJn//5n/zJn/mZn/Zpn/M5n/AJnM/5nMzJnMmZnMZpnMM5nMAJmZ/5mZzJmZmZmZZpmZM5mZAJlm/5lmzJlmmZlmZplmM5lmAJkz/5kzzJkzmZkzZpkzM5kzAJkA/5kAzJkAmZkAZpkAM5kAAGb//2b/zGb/mWb/Zmb/M2b/AGbM/2bMzGbMmWbMZmbMM2bMAGaZ/2aZzGaZmWaZZmaZM2aZAGZm/2ZmzGZmmWZmZmZmM2ZmAGYz/2YzzGYzmWYzZmYzM2YzAGYA/2YAzGYAmWYAZmYAM2YAADP//zP/zDP/mTP/ZjP/MzP/ADPM/zPMzDPMmTPMZjPMMzPMADOZ/zOZzDOZmTOZZjOZMzOZADNm/zNmzDNmmTNmZjNmMzNmADMz/zMzzDMzmTMzZjMzMzMzADMA/zMAzDMAmTMAZjMAMzMAAAD//wD/zAD/mQD/ZgD/MwD/AADM/wDMzADMmQDMZgDMMwDMAACZ/wCZzACZmQCZZgCZMwCZAABm/wBmzABmmQBmZgBmMwBmAAAz/wAzzAAzmQAzZgAzMwAzAAAA/wAAzAAAmQAAZgAAMwAAAOjo6N/f3////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAANoALAAAAABkAGQAAAj/ALMJHEiwoMGDCBMqXMiwoUIAECNKnEixosWLErNh3MixY0SNFrFdFBly5EWQFUmmNFnSIkqPMGMCeCmzJkaaElVS1DmRZ86TLFe2FFoRp82jGZEqpWgUos+IT50GZTq1Z9WfLpdqhdh0a8yuUQGEHQt06M6rUMt6Rdp1bUeRcMXKjUt3rt26eO/qzct3r9++Itu63Sh4sNqzZq0mTro4bWOpWQ3XLCyZ6mO5l8OCRQuZqOXKMCmD/sgZs2fFRUuTvSx69EzXHjdnLi37NFbbpGFzbD0a8N/fvoMDHy48Lm/QxyvXRoy782fm0FFHZ6z7ZnXCqrNHbm56uuPU1w+H/5+4XLr528/Pf/funPz47e+ps++uvr38+vTR408umb/h4sQFCOCAAurl32AHulWefgyu595sEIIX330TLuhgg/blxt1q3CW4lodeWZjhiPlpOB+H84G4lYpaiVgiiZppt6F4FU5oFYE4FpjjjnKxuJSPSrmI4n4ynkhjfECyVSR+MUZoJHw2JnmUkEtSeOGVMB75npQ2UenkgzN+aeWWNmbk0JlopqnmmlxOVqaJTFYJJ4Yv1tnkm23K5GWYEj7JZ3o1vvmamFjWuaefgCIp6KB/xgklnUPSmedXi/JoqY6YEjhpaIse6mifnyIKZpmbxiZnlo8WGmmhpXbU6m6n2puppayEctXprbXSCiqksb6KnaCXBpvpsH35ap2gnvKaKqqNjjmesbOuymyi04Y6apS4NqtqtLHeSWq2oiq767a5QrvseMKmS+y6gYGLba7SMhouueOSiWy3tOHLmruBaluts/HGa269z+rbocEp8hufugyzi+nA1BYMb74T73vvxf7qGnHAFOOp8L/0bozwtf1+W/HBJyeMcZkBAQA7") repeat;}'; html += '#ifm_wrap{margin: 80px auto 0; width: 360px; height: 640px; border: 3px solid #000; background-color: #000; border-radius: 30px; padding: 40px 0px;box-shadow:0 12px 25px rgba(0,0,0,0.25);position:relative;}'; html += '#ifm_wrap > .button{display: table;width: 100%;height: 3.5%;position: absolute;left: 0;bottom: 1%;} #ifm_wrap > .button p{width: 100%;height: 100%;display: table-cell;vertical-align: baseline;text-align: center;} #ifm_wrap > .button p span{display: inline-block;width: 30%;height: 100%;border:1px solid #7A7A7A;border-radius: 100px;background-color:#333;} #ifm_wrap.h{width: 640px;height: 360px;} #ifm_wrap.h > .button{width: 3.5%;height: 100%;left: auto;bottom: auto;right: 1%;} #ifm_wrap.h > .button p{width: 100%;height: 100%;text-align: left;vertical-align: middle;} #ifm_wrap.h > .button p span{width: 100%;height: 30%;}'; html += '#ifm_wrap.h{padding:0px 40px;}'; html += '#ifm_wrap .btn{display:block;}'; html += '#ifm_wrap,#rw{transition: all 0.35s ease-out;}'; html += '#rw{background-color: #fff}'; html += '#buttons{z-index:1;min-width:978px;text-align: center; padding: 10px; width: 100%; height: 30px; background-color: #f1f1f1; position: fixed; left: 0; top: 0; border-bottom: 1px solid #ccc;}'; html += '#buttons button{border: 1px solid #000; border-radius: 12px; padding: 2px 13px; background-color: #000; color: #fff;}'; html += '</style>'; html += '</head>'; html += '<body id="body">'; html += '<div id="buttons">'; html += '<button>360*640</button>'; html += '<button>320*533</button>'; html += '<button>320*598</button>'; html += '<button>360*640</button>'; html += '<button>400*640</button>'; html += '<button>400*683</button>'; html += '<button>320*568</button>'; html += '<button>320*480</button>'; html += '<button>384*640</button>'; html += '<button>439*585</button>'; html += '<button>회전</button>'; html += '</div>'; html += '</body>'; html += ''; html += '</html>'; html += ''; document.write(html); d.body.insertAdjacentHTML('beforeend', '<div id="ifm_wrap"><div class="button"> <p id="dv_btn"> <span></span> </p> </div><iframe src="about:blank" id="rw" frameborder="0" scrolling="yes" style="overflow:hidden;margin: 0 auto;width:100%;height:100%;display: block;"></iframe></div>'); var ifrm = d.getElementById('rw'); ifrm.src = window.location.href; function ifr_resize(w, h) {var ifrm = document.getElementById('ifm_wrap'); var ifrm_style = ifrm.style; var getComputedStyle = window.getComputedStyle(document.getElementById('ifm_wrap'), null); if (w == '회전') {var ori_res = (String(getComputedStyle.getPropertyValue('width')) + '*' + String(getComputedStyle.getPropertyValue('height'))).split('*'); ifrm_style.width = ori_res[1]; ifrm_style.height = ori_res[0]; if (ifrm.getAttribute('class') == 'null' || ifrm.getAttribute('class') == 'h') {ifrm.setAttribute('class', 'v'); } else {ifrm.setAttribute('class', 'h'); } } else {ifrm.setAttribute('class', ''); ifrm_style.width = w + 'px'; ifrm_style.height = h + 'px'; } } d.getElementById('buttons').addEventListener('click', function(e) {if (e.target && e.target.nodeName == 'BUTTON') {var size = e.target.innerText.split('*'); ifr_resize(size[0], size[1]); } }); d.getElementById('dv_btn').addEventListener('click', function(e) {if (e.target && e.target.nodeName == 'SPAN') {ifrm.contentWindow.location.reload(); } }); })();

2. 모바일 페이지를 반응형 모드로 보기 실행 해보자

데스크탑 환경에서 모바일 페이지를 봤을때 화면 — 데스크탑 환경에서 모바일페이지를 보았을때

모바일 전용 페이지일 경우에 컨텐츠 폭이 넓어 읽기 힘들 경우 사용하시면 됩니다.

상단에 해상도 조절 버튼이 있으며 회전 버튼을 누르면 수평모드(landsacpe mode)로 확인해서 보실 수 있습니다.

그럼, 즐거운 인터넷 생활 되시고 다음 번에도 유익한 정보 가지고 올게요 😊

728x90