pc端网页缩放的方案探索
最近领导给了个需求：一个web页面header和footer的部分不能随浏览器zoom in/out 改变样式及字体大小。
分析了需求和查阅相关资料后，写个demo，实现了整个页面不随ctrl+(+/-) 组合键或者ctrl+鼠标滚轮 缩放的效果，对于浏览器工具/设置的缩放没有效果。
键盘/鼠标事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <!-- 缩放比例仅在移动端有效，在pc端无效 --> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=3,minimum-scale=0.5" /> <title>Document</title> </head> <body></body> </html> <html> <head> </head> <body style="font-size: 30px"> <div class="header"><h1>测试</h1></div> <div class="content"><br />SCRIPT脚本控制页面不随ctrl+鼠标滚轮而缩放。<br /></div> </body> <script> let gloable_key = { ctrlDown: false }; //禁止Ctrl + （+/-）组合 //event.ctrlKey：键盘的Ctrl键 event.metaKey：mac上的Command document.addEventListener( "keydown", function (event) { if (event.ctrlKey === true || event.metaKey === true) { gloable_key["ctrlDown"] = true; //如果ctrl键按下，记录到变量 } if ((event.ctrlKey === true || event.metaKey === true) && (event.which === 61 || event.which === 107 || event.which === 173
|| event.which === 109 || event.which === 187 || event.which === 189)) { event.preventDefault(); //阻止默认缩放 } }, false ); // 禁止Ctrl + 鼠标轮滑 //DOMMouseScroll是火狐对鼠标轮滑的监听事件。mousewheel是Chrome，IE对鼠标轮滑的监听事件 document.addEventListener( "DOMMouseScroll", function (event) { if ("ctrlDown" in gloable_key && gloable_key["ctrlDown"]) { event.preventDefault(); //阻止默认缩放 } }, { passive: false } ); document.addEventListener( "mousewheel", function (event) { if ("ctrlDown" in gloable_key && gloable_key["ctrlDown"]) { event.preventDefault(); //阻止默认缩放 } }, { passive: false } ); </script> </html>
然而单个元素添加以上效果，该怎么做呢？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <!-- 缩放比例仅在移动端有效，在pc端无效 --> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=3,minimum-scale=0.5" /> <title>Document</title> </head> <body></body> </html> <html> <head> </head> <body style="font-size: 30px"> <div class="header"> <h1>测试</h1> </div> <div class="content"><br />SCRIPT脚本控制页面不随ctrl+鼠标滚轮而缩放。<br /></div> </body> <script> let gloable_key = { ctrlDown: false }; let elem_header = document.querySelector(".header"); //禁止Ctrl + （+/-）组合 //event.ctrlKey：键盘的Ctrl键 event.metaKey：mac上的Command document.addEventListener( "keydown", function (event) { if (event.ctrlKey === true || event.metaKey === true) { gloable_key["ctrlDown"] = true; //如果ctrl键按下，记录到变量 } if ((event.ctrlKey === true || event.metaKey === true) && (event.which === 61 || event.which === 107 || event.which === 173 || event.which === 109 || event.which === 187 || event.which === 189)) { event.preventDefault(); //阻止默认缩放 } }, false ); // 禁止Ctrl + 鼠标轮滑 //DOMMouseScroll是火狐对鼠标轮滑的监听事件。mousewheel是Chrome，IE对鼠标轮滑的监听事件 elem_header.addEventListener( "DOMMouseScroll", function (event) { if ("ctrlDown" in gloable_key && gloable_key["ctrlDown"]) { event.preventDefault(); //阻止默认缩放 } }, { passive: false } ); elem_header.addEventListener( "mousewheel", function (event) { if ("ctrlDown" in gloable_key && gloable_key["ctrlDown"]) { event.preventDefault(); //阻止默认缩放 } }, { passive: false } ); </script> </html>
效果就是鼠标放到header区域，不随ctrl+(+/-) 组合键或者ctrl+鼠标滚轮 缩放，鼠标放到content区域，随意缩放，显然不是想要的效果。
依靠键盘事件似乎达不到控制区域的精细效果，header上绑定的键盘事件也不会在header上按下键盘按键触发键盘事件的效果。没思路了。
css的zoom和transform-scale
<html> <head> </head> <body> <div class="header" style="border: 1px silver solid; padding: 0.25rem; height: 300px; overflow-y: auto"> <div class="content_scale" style="background-color: aqua"> <h1>测试</h1> <h1>测试</h1> <h1>测试</h1> <h1>测试</h1> <h1>测试</h1> <h1>测试</h1> <h1>测试</h1> </div> </div> <div class="header" style="border: 1px silver solid; padding: 0.25rem; height: 300px; overflow-y: auto"> <div class="content_zoom" style="background-color: bisque"> <h1>测试</h1> <h1>测试</h1> <h1>测试</h1> <h1>测试</h1> <h1>测试</h1> <h1>测试</h1> <h1>测试</h1> </div> </div> <div style="border: 1px silver solid; padding: 0.25rem"> <h1>对比</h1> </div> </body> <script> let gloabl_scale = 1.0; let elem_scale = document.querySelector(".content_scale"); elem_scale.addEventListener("mousewheel", handleScale, { passive: false }); elem_scale.addEventListener("DOMMouseScroll", handleScale, { passive: false }); function handleScale(event) { //event.deltaY > 0 滚轮朝前滑动 if (event.deltaY > 0) { gloabl_scale += 0.1; if (gloabl_scale > 2.0) gloabl_scale = 2.0; elem_scale.style.transform = "scale(" + gloabl_scale + ")"; elem_scale.style.transformOrigin = "0 0"; } else { gloabl_scale -= 0.1; if (gloabl_scale < 0.5) gloabl_scale = 0.5; elem_scale.style.transform = "scale(" + gloabl_scale + ")"; elem_scale.style.transformOrigin = "0 0"; } } let gloabl_zoom = 1.0; let elem_zoom = document.querySelector(".content_zoom"); elem_zoom.addEventListener("mousewheel", handleZoom, { passive: false }); elem_zoom.addEventListener("DOMMouseScroll", handleZoom, { passive: false }); function handleZoom(event) { //event.deltaY > 0 滚轮朝前滑动 放大 if (event.deltaY > 0) { gloabl_zoom += 0.1; if (gloabl_zoom > 2.0) gloabl_zoom = 2.0; } else { gloabl_zoom -= 0.1; if (gloabl_zoom < 0.5) gloabl_zoom = 0.5; } elem_zoom.style.zoom = gloabl_zoom; } </script> </html>
以下三图分别是无缩放、最小、最大的结果
使用zoom缩放较符合需求，缩放区域缩小后无滚动条，而scale的滚动条始终都在。
然而firefox浏览器到今天仍然不支持zoom，只得放弃此种方案
css字体单位
试下缩放对不同的字体单位的影响
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { margin: 0; padding: 0; } body { height: 100vh; width: 100vw; } div { border: 1px solid red; } p { border: 1px solid silver; } .vh { font-size: 2vh; } .vw { font-size: 1vw; } .px { font-size: 20px; } .em { font-size: 2em; } .rem { font-size: 2rem; } </style> </head> <body> <div class="vh"> vh单位:2vh <p style="font-size: 4vh">vh单位:4vh</p> <p style="font-size: 6vh">vh单位:6vh</p> <p style="font-size: 8vh">vh单位:8vh</p> </div> <div class="vw"> vw单位:1vw <p style="font-size: 2vw">vw单位:2vw</p> <p style="font-size: 4vw">vw单位:4vw</p> </div> <div class="px">px单位:20px</div> <div class="em">em单位:2em</div> <div class="rem"> rem单位:2rem <p style="font-size: 4rem">rem单位:4rem</p> </div> </body> </html>
vh和vw单位在25%-100%缩放比例时字体大小保持基本不变，100%-500%缩放比例字体增大
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { margin: 0; padding: 0; } .main-header { font-size: 2vh; height: 10vh; line-height: 10vh; border: 1px solid red; } .content { font-size: 1.2rem; border: 1px solid red; height: 85vh; line-height: 85vh; } html { overflow: hidden; } iframe { display: block; border: none; height: 85vh; width: 100%; } </style> </head> <body> <div class="main-header">LOGO</div> <div class="content"> <iframe src="./test/table.html" height="85vh" width="100%"></iframe> </div> </body> </html>
效果如此，没思路了
