对于div里面内容过大根据长度或者宽度进行适配，然后可以滚轮缩放的功能

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在做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>