我如何才能在不滚动的情况下缩放页面?

时间:2018-11-04 05:03:37

标签: javascript html css

因此,我的一个好友遇到了一个问题,该网站在1440px x 1024px的屏幕上可以正常显示,但是在较小的屏幕上,您需要滚动才能进一步查看。我们一直在搜索并且无法弄清楚,现在可能是这样的事实,即它主要是由png构成的,缩放无法正常工作,或者它可能是我们都是白痴,而且实际上非常简单,无论哪种情况我们都无法解决,希望有人可以。 Overflow-y:hidden将无法解决问题,因为这只会阻止滚动并且页面内容保持原样。我们还尝试使用JS来检测窗口大小,但它似乎也不起作用。

此处在1366px x 768px屏幕上以100%缩放 https://imgur.com/LN6YJUJ

这是他希望其在没有滚动的情况下的外观(这是同一屏幕的65%缩放) https://imgur.com/97vjDs0

这是CSS和HTML(由于缺少文件而无法运行,但我认为问题可能出在其中)

html{
  height: 100%;
  
  
}

body{
  background: url("../img/background.png") no-repeat center center fixed;
  background-size: cover;
}
.margin-15{
  margin-top: 7%;
}
.container-fluid{
  height: 100vh;
  min-height: 100%;
  min-width: 100%;
}
.Rectangle{
  width: 168px;
  height: 44px;
  margin-top: 3%;
  border-radius: 18px;
  background-color: #292929;
  left: 43%;
  top: 28.3%;
}
.Rectangle p{
  text-align: center;
  padding-right: 10%;
  padding-top: 6%;
  width: 185.2px;
  height: 34.3px;
  font-family: Roboto;
  font-size: 18px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #ffffff;
}
.Rectangle p span{
  color: #a3e8f5;
}
.navBar1 img{
  max-width: 40%;
  padding-top: 2%;
  object-fit: contain;
}


/**.col-xs-3 .atomix{
  padding-top: 4%;
}
.col-xs-3 .Rectangle{
  margin-top: 20%;
}
.col-xs-3 .navBar1{
  margin-top: 10%;
  padding-bottom: 20%;
}
.col-xs-3 .atomix{
  margin-top: 2%;
}
.col-xs-3 .forums{
  margin-top: -5%;
}
.col-xs-3 .discord{
  margin-top: 4%;
} **/
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Home | Lectric</title>

    <link rel="stylesheet" href="css\bootstrap.min.css">
    <link rel="stylesheet" href="css\master.css">

    <script src="https://cdn.jsdelivr.net/gh/leonardosnt/mc-player-counter@1.1.1/dist/mc-player-counter.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="container-fluid mt-5">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-xs-3 margin-3">
          <div class="atomix">
          <img src="img\atomix.png" alt="Atomix" class="img-responsive mx-auto d-block"/>
          </div>
          <div class="col-lg-12 col-md-12 col-xs-3">
            <div class="Rectangle playersOnline mx-auto d-block">
              <p><span data-playercounter-ip="atomixprison.net">0</span> online</p>
            </div>
        </div>
      </div>
    </div>
    <div class="col-lg-12 col-md-12 col-xs-3">
    <div class="navBar1">
      <img src="img/NavBar1.png" class="img-responsive mx-auto d-block" alt="navbar"/>
    </div>
    </div>
    <div class="row margin-4 margin-15">
      <div class="col-lg-5 col-md-5 mb-0">
        <div class="webStore">
          <a href="https://atomixnetwork.buycraft.net/"><img src="img/webstore.png" alt="webstore" class="mx-auto d-block img-responsive"></a>
        </div>
      </div>
      <div class="col-lg-2 mt-xl-5 col-md-5 mb-md-0">
        <div class="forums">
          <a href="https://www.atomixprisonmc.net/"><img src="img/forums.png" alt="forums" class="mx-auto d-block img-responsive"></a>
        </div>
      </div>
      <div class="col-lg-5 col-md-5 mb-0">
        <div class="discord">
          <a href="https://discord.gg/D63c9JM"><img src="img/discord.png" alt="discord" class="mx-auto d-block img-responsive"></a>
        </div>
      </div>
    </div>
</div>





    <script type="text/javascript" src="js\bootstrap.min.js"></script>
    <script type="text/javascript">
        $('#body').css('min-height', '100%');
    </script>
  </body>
</html>

1 个答案:

答案 0 :(得分:0)

所以,我有100%的把握是因为解决问题的大小不一,所以我的屏幕上有滚动条,事实证明,接收该网站的人未将其缩放比例设置为100 %,所以看起来对他们来说很奇怪。...叹气 ...有些人。...