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

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

'컴퓨터활용 > html, css , js' 카테고리의 다른 글

북마크스크립트 - 유튜브 재생 속도 조절 (0)	2023.05.01
북마크스크립트 - 웹페이지 우클릭 금지 해제 및 드래그 해제 스크립트 (0)	2023.04.30
북마크스크립트 - 웹페이지 본문 글자를 크게 해서 보기 (0)	2023.04.29
북마크스크립트 - 웹페이지에서 이미지만 추출 해서 보여주기 (0)	2023.04.26
북마크스크립트 - 웹페이지에서 outline 그려주기 (0)	2023.04.24

윤컴랜드

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

1. 북마크스크립트 등록

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

'컴퓨터활용 > html, css , js' 카테고리의 다른 글

티스토리툴바

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

1. 북마크스크립트 등록

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

'컴퓨터활용 > html, css , js' 카테고리의 다른 글

'컴퓨터활용/html, css , js' Related Articles

티스토리툴바