實驗 · 前端筆記

## 實驗 ```html <!DOCTYPE html> <html style="font-size: 100px;"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">  <title>test</title> <style> body { margin: 0; font-size: 15px; } .clearfix:after, .clearfix:before { display: table; content: " "; } .clearfix:after { clear: both; } .d1, .d2, .d3, .d4 { width: 90px; height: 90px; line-height: 90px; text-align: center; float: left; margin-bottom: 10px; } .d1.rem, .d2.rem, .d3.rem, .d4.rem { width: 0.9rem; height: 0.9rem; line-height: 0.9rem; text-align: center; float: left; font-size: 0.15rem; } .d1 { background: #E03636; } .d2 { background: #EDD0BE; } .d3 { background: #FF534D; } .d4 { background: #25C6FC; } .d1.rem { background: #FF3399; } .d2.rem { background: #FFCC99; } .d3.rem { background: #FF6666; } .d4.rem { background: #e32cff; } .rem-box { width: 3.6rem; height: 3.6rem; background: #51d3ff; font-size: 0.25rem; } .btn { margin: 0.2rem; width: 200px; height: 50px; line-height: 50px; color: #323232; text-align: center; border: 1px #202020 solid; border-radius: 5px; background: #f8f8f8; font-size: 15px; } .btn._px { border-width: 0.5px; } .btn.rem { width: 2rem; height: 0.5rem; line-height: 0.5rem; border-width: 0.01rem; font-size: 0.15rem; } .btn.rem._px { border-width: 0.005rem; } .info { position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.66); color: #fff; font-size: 12px; padding: 10px; } .btn-g { position: fixed; right: 0; top: 1rem; width: 0.3rem; font-size: 0; padding: 0.05rem; background: rgba(0, 0, 0, 0.37); padding-bottom: 0; } .btn-g button { width: 0.3rem; height: 0.3rem; background: #f2f2f2; color: #333; border: 0.01rem black solid; font-size: 0.16rem; margin-bottom: 0.1rem; line-height: 0.3rem; border-radius: 0.05rem; outline: none; } .btn-g button:active { background: #ff4040; } .btn-g span { width: 0.3rem; height: 0.3rem; background: #fff; color: black; text-align: center; line-height: 0.3rem; font-size: 0.15rem; display: inline-block; margin-bottom: 0.1rem; margin-top: 0.05rem; } .isRetina { background: #9C27B0; color: #fff; padding: 0.02rem 0.05rem; display: none; border-radius: 2px; font-size: 0.12rem; margin-left: 0.1rem; } </style> </head> <body> <div class="d1">90px</div> <div class="d2">90px</div> <div class="d3">90px</div> <div class="d4">90px</div> <div class="clearfix"></div> <div class="d1 rem">0.9rem</div> <div class="d2 rem">0.9rem</div> <div class="d3 rem">0.9rem</div> <div class="d4 rem">0.9rem</div> <div class="clearfix"></div> <div class="btn">1px</div> <div class="btn _px">0.5px</div> <div class="btn rem">0.01rem</div> <div class="btn rem _px">0.005rem</div> <div class="rem-box">3.6rem</div> <div class="info"> <p>window.screen.width: <span class="screen"></span></p> <p>window.innerWidth: <span class="innerWidth"></span></p> <p>html.clientWidth：<span class="clientWidth"></span></p> <p>html.getBoundingClientRect().width：<span class="getBoundingClientRect"></span></p> <p>window.dpr: <span class="dpr"></span><span class="isRetina">高清屏</span></p> <p>viewport：<span class="viewport"></span></p> </div> <div class="btn-g"> <span class="value">1</span> <button class="add">+</button> <button class="reduce">-</button> </div> <script> var init = function() { var htmlSize = function() { // 以360px的設備獨立像素為標準 var Z = 3.6; // 以750的設計稿為標準 // var Z = 7.5; // 以375的設備獨立像素，750的設計稿為標準（iPhone 6 dpr:2） // var Z = 3.75; // Z定什么值都可以，只要始終以一個標準換算就可以，一般取一個能使基準值為100就好了，這樣設計稿換算到代碼rem時方便一些 var html = document.querySelector('html'); // var P = window.innerWidth; // var P = document.documentElement.clientWidth; var P = document.documentElement.getBoundingClientRect().width; html.style.fontSize = P / Z + 'px'; } viewport = document.querySelector("meta[name=viewport]"); var resize = function() { var screen = document.querySelector('.screen'); screen.innerHTML = window.screen.width; var innerWidth = document.querySelector('.innerWidth'); innerWidth.innerHTML = window.innerWidth; var dpr = document.querySelector('.dpr'); dpr.innerHTML = window.devicePixelRatio; var getBoundingClientRect = document.querySelector('.getBoundingClientRect'); getBoundingClientRect.innerHTML = document.documentElement.getBoundingClientRect().width; var clientWidth = document.querySelector('.clientWidth'); clientWidth.innerHTML = document.documentElement.clientWidth; document.documentElement.setAttribute("data-dpr", window.devicePixelRatio); // 高清屏標記 if (window.devicePixelRatio >= 2) { var fakeBody = document.createElement('body'); var testElement = document.createElement('div'); testElement.style.border = '.5px solid transparent'; fakeBody.appendChild(testElement); document.documentElement.appendChild(fakeBody); if (testElement.offsetHeight === 1) { document.documentElement.classList.add('hairlines'); } document.documentElement.removeChild(fakeBody); document.querySelector('.isRetina').style.display = 'inline-block'; } else { document.documentElement.classList.remove('hairlines'); document.querySelector('.isRetina').style.display = 'none'; } htmlSize(); } window.addEventListener('resize', resize); window.addEventListener('pageshow', resize); resize(); // 使其更可靠 // setInterval(resize, 1000); var scale = function(x) { var x = x || 1; // 創建meta元素 if (viewport == null) { var metaEl = document.createElement('meta'); var scale = x; // var scale = isRetina ? 0.5 : 1; metaEl.setAttribute('name', 'viewport'); // 注意這里，設置視口縮放時沒有設置 width=device-width metaEl.setAttribute('content', 'width=device-width,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale + ',user-scalable=no,viewport-fit=cover'); if (document.documentElement.firstElementChild) { document.documentElement.firstElementChild.appendChild(metaEl); } else { var wrap = document.createElement('div'); wrap.appendChild(metaEl); documen.write(wrap.innerHTML); } } else { viewport.content = 'width=device-width,user-scalable=no,initial-scale=' + x + ',maximum-scale=' + x + ',minimum-scale=' + x + ',viewport-fit=cover'; } var _viewport = viewport || metaEl; console.log(_viewport.content); var v = document.querySelector('.viewport'); v.innerHTML = _viewport.content; // 縮放后設備獨立像素改變了，那么是否需要重新計算基準值呢 // 其實設備獨立像素改變了屏幕的resize事件就會被觸發了（width和scale同時設置的話就不會觸發這個事件了） // resize(); if (_viewport.content.indexOf('width') != -1) { resize(); } } scale(); // scale(2); // 放大頁面，設備獨立像素縮小一倍 // scale(0.5); // 縮小頁面，設備獨立像素放大一倍（淘寶用這種方式解決） /* 增加減小按鈕事件：修改viewport縮放值 */ var value = document.querySelector('.value'); var add = document.querySelector('.add'); var reduce = document.querySelector('.reduce'); var addF = function() { var x = parseFloat(value.innerHTML) + 0.25; value.innerHTML = x; scale(x); } var reduceF = function() { var x = parseFloat(value.innerHTML) - 0.25; if (x <= 0.25) { x = 0.25; } value.innerHTML = x; scale(x); } if ((/Mobile/i).test(window.navigator.userAgent)) { add.addEventListener('touchstart', addF); reduce.addEventListener('touchstart', reduceF); } else { add.addEventListener('click', addF); reduce.addEventListener('click', reduceF); } } init(); // setTimeout(init, 1000); </script> </body> </html> ``` * * * * * ### 擴展 [The Ultimate Guide To iPhone Resolutions](https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions) [前端：viewport-fit解決iphoneX的“劉海”問題 - Clancey - 博客園](https://www.cnblogs.com/WQLong/p/7778368.html) ``` <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> ``` [關于H5頁面在iPhoneX適配 - lolDragon - 博客園](https://www.cnblogs.com/lolDragon/p/7795174.html) * * * * * last update：2018-7-21 00:18:56