我有一个具有固定宽度和高度的单页 Web 应用程序。我需要始终适应页面。我在缩放时遇到问题。
如果我只根据它缩放它，它就可以完美地工作。
var app = $('body');
var appWidth = app.width();
var currentWidth = window.innerWidth;
var ratio = currentWidth / appWidth;
app.css('zoom', ratio);
$(window).resize(function() {
currentWidth = window.innerWidth;
ratio = currentWidth / appWidth;
app.css('zoom', ratio);
console.log(ratio);
});html {
background-color: red;
}
body {
background-color: gray;
width: 960px;
height: 540px;
position:relative;
}
p{
position:absolute;
bottom:0;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<h1>This content shrinks once it's scaled</h1>
<img src="http://lorempixel.com/400/200/" />
<p>This shouldn't get cut off once it's scaled</p>
</body>但是，我试图通过它的高度和宽度来实现缩放，而不需要拉伸(stretch)以使其正确适合页面。我知道在相同的情况下可能会有一些额外的间距，但只要不拉伸(stretch)就可以。
下面的代码是我得到的。如您所见，一旦从两边进行缩放，它就无法很好地缩放。
var app = $('body');
var appWidth = app.width();
var appHeight = app.height();
var lastWidth = window.innerWidth;
var lastHeight = window.innerHeight;
var currentWidth;
var currentHeight;
var ratio;
app.css('zoom', ratio);
fitToPage();
$(window).resize(function() {
fitToPage();
});
function fitToPage() {
currentWidth = window.innerWidth;
currentHeight = window.innerHeight;
if(currentWidth !== lastWidth && currentHeight !== lastHeight){
console.log('both width and height changed');
ratio = currentWidth / appWidth;
app.css('zoom', ratio);
lastWidth = window.innerWidth;
lastHeight = window.innerHeight;
}
else if (currentWidth !== lastWidth){
console.log('width changed');
ratio = currentWidth / appWidth;
app.css('zoom', ratio);
lastWidth = window.innerWidth;
}
else if (currentHeight !== lastHeight){
console.log('height changed');
ratio = currentHeight / appHeight;
app.css('zoom', ratio);
lastHeight = window.innerHeight;
}
}html {
background-color: red;
}
body {
background-color: gray;
width: 960px;
height: 540px;
position:relative;
}
p{
position:absolute;
bottom:0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<h1>This content shrinks once it's scaled</h1>
<img src="http://lorempixel.com/400/200/" />
<p>This shouldn't get cut off once it's scaled</p>
</body>最佳答案
如果你超过 960px 的宽度，你的 if-else-conditions 都不成立，所以缩放停止。
您可以复制它以在您的控制台中查看它。我添加了一个超过 960px 宽度的案例。
function fitToPage() {
console.log("ratio" +ratio);
console.log("appwidth " +appWidth);
console.log("curwidth " +currentWidth);
console.log("curheight " +currentHeight);
console.log("appheight " +appHeight);
currentWidth = window.innerWidth;
currentHeight = window.innerHeight;
if (appWidth > currentWidth && appHeight > currentHeight) {
console.log('both');
ratio = currentWidth / appWidth;
app.css('zoom', ratio);
} else if (appWidth > currentWidth) {
console.log('only width');
ratio = currentWidth / appWidth;
app.css('zoom', ratio);
} else if (appHeight > currentHeight) {
console.log('only height');
ratio = currentHeight / appHeight;
app.css('zoom', ratio);
}else if (appWidth < currentWidth){
ratio = currentWidth / appWidth;
app.css('zoom', ratio);
console.log('smallercase');
}
}
关于jquery - 缩放主体并正确保持纵横比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40851844/