在做3000的项目中，因为页面的svg很大，但是做的只是适配电脑，打开肯定是看不全的，要看全就必须进行滚动，可是客户提出了将页面放在电视机上面，用电视输入网址直接访问，这样问题就来了，电视上怎么进行滚动呢
所以新增需求
1、页面根据不同尺寸的设置进行适配
2、确保页面内容可以全部查看完整
3、可以进行滚轮滚动缩放
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> html,body{ width:100%; height:100%; overflow:hidden; padding:0; margin:0; } #big{ overflow:auto; width:100%; height:100% } #content{ width:3000px; height:2000px; background-color:pink; display:flex; justify-content:center; align-items:center; transform-origin:0 0; } #content>span{ display:flex; justify-content:center; align-items:center; width:500px; height:500px; color:white; background: rgba(0,0,0,0.5); } </style> </head> <body> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> window.onload=function(){ initEvent() //计算是宽度优先的还是高度优先的 initScale() } function initScale(){ var initScale = 1; if($(window).width()/$("#content").width()<$(window).height()/$("#content").height()){ initScale=$(window).width()/$("#content").width(); }else{ initScale=$(window).height()/$("#content").height(); } console.log(initScale) $("#content").css("transform","scale("+initScale+")") } function initEvent(){ //滚轮效果 var params={} $('body').on('mousewheel',function(e){ params.zoomVal+=event.wheelDelta/1200; var o=e.target; if (params.zoomVal >= 0.2) { $("#content").css("transform","scale("+params.zoomVal+")") } else { params.zoomVal=0.2;//不让其一直无限缩小 $("#content").css("transform","scale("+params.zoomVal+")") return false; } }) $(window).on("resize",function(){ initScale() }) } </script> <div id="big"> <div id="content" class="big-image"> <span>测试根据屏幕尺寸进行缩放div</span> </div> </div> </body> </html>
效果图
