Question

我有这个具有固定宽度和高度的网页单页应用程序。我需要一直适合页面。我有缩放它的问题。

如果我只根据它进行缩放，那么效果非常好。

＆＃13;

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);
});

＆＃13;

html {
  background-color: red;
}
body {
  background-color: gray;
  width: 960px;
  height: 540px;
  position:relative;
}
p{
position:absolute;
bottom:0;
}

＆＃13;

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

＆＃13;

然而，我试图通过它的高度和宽度来实现比例，而不需要拉伸以在页面上正确地适应它。我知道在相同的情况下可能会有一些额外的间距，但只要它没有拉伸就很好。

下面的代码是我得到的。正如你所看到的那样，一旦它从双方缩放后它就不能很好地扩展，它会让你感到困惑。

＆＃13;

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;
  }
   
}

＆＃13;

html {
  background-color: red;

}
body {
  background-color: gray;
  width: 960px;
  height: 540px;
  position:relative;
}
p{
position:absolute;
bottom:0;
}

＆＃13;

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

＆＃13;

Answer 1

不太确定，但如果你只看窗户的宽度并保持身高相同的高度/宽度。 CSS可以提供帮助：

（高度可以溢出html）

＆＃13;

html {
  background-color: red;
  position:relative;
  padding-top:56.25%;/* 54/96=0.5625 */
}
body {
  background-color: gray;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

＆＃13;

<h1>Test App</h1>

＆＃13;

了解其工作原理：

https://www.w3.org/TR/CSS2/box.html#padding-properties

<强> <percentage>

百分比是根据生成的包含块的宽度计算的，即使对于“填充顶部”也是如此。并且＆＃39; padding-bottom＆＃39;。如果包含块的宽度取决于此元素，则在CSS 2.1中未定义结果布局。

你也可以避免盒子高于窗户的高度：

（框不会溢出窗口）

＆＃13;

html {
  background:tomato;
  margin:0;
  max-width:156vh;
  position:relative;
  margin: 5vh auto;
}
html:before {
  content:'';
  padding-top:56.25%;
  display:inline-block
}
body {
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:#aaa;
  /* makeup*/
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-size:10vh;
}

＆＃13;

keep my ratio & inside window

＆＃13;

Answer 2

如果你超过960px的宽度，你的if-else条件都没有，那么缩放就会停止。

您可以复制此内容以在控制台中查看。我添加了一个超过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');
  }

}

缩放正文，保持纵横比正确

2 个答案: