网站不断在移动设备上调整大小答案

【问题标题】：Website Keeps Resizing on Mobile Device网站不断在移动设备上调整大小
【发布时间】：2018-03-20 13:54:28
【问题描述】：

所以我在构建了将近一年后完成了我的网站，但我的网站在我的移动设备上的响应能力存在问题。我似乎无法找出问题所在。在我走得更远之前，请帮助我弄清楚这一点。我使用 bootstrap 4 和 Ajax 来加载页面和模式。这是我需要对网站进行的最后一项更改，以使其能够响应移动设备。

https://trillumonopoly.com

<html lang="en">
<head>
<title>MAIN</title>

<script>
/*

Suga Slider

Usage ---------

$(window).load(function(){
  $('#logos').suga({
    'transitionSpeed': 2000,
    'snap': false
  });
});

The markup should resemble the markup here

*/

$.fn.suga = function(options) {
  var settings = $.extend({
      'transitionSpeed': 3000,
      'snap': false
  }, options);

  var $this = $(this);

  // add plugin specific classes
  $this.addClass('suga-slider-wrap');
  $this.children('ul').addClass('suga-slider-group');
  $this.find('li').addClass('suga-slide');  

  // caching $$$
  var $slide = $('.suga-slide'),
            $firstEl = $('.suga-slide:first'),
      $group = $('.suga-slider-group'),
      $wrap = $('.suga-slider-wrap');

  var slideWidth = $slide.outerWidth(),
        slideHeight = $('.suga-slide').height(),
      slideCount = $slide.length,
      totalWidth = slideWidth * slideCount;

  // set width on group element
  $group.width(totalWidth);
  $wrap.height(slideHeight);
  $wrap.wrap('<div class="suga-container"></div>');

  // add first class at start
  if (!$group.find($firstEl).hasClass("suga-first")) {
    $group.find($firstEl).addClass("suga-first");
  }

  // lets move baby
  var transitionSnap = function() {
    var $firstEl = $group.find('.suga-first').html();

    $group.find('.suga-first').animate({
      'margin-left': '-' + slideWidth + 'px'
    }, function(){
     $group.append('<li class="suga-slide">' + $firstEl + '</li>');
     $(this).remove(); 
     $group.find('li:first').addClass("suga-first");

    });  
  };

  var transitionScroll = function() {
     var $firstEl = $group.find('.suga-first').html();

    $group.find('.suga-first').animate({
      'margin-left': '-' + slideWidth + 'px'
    }, settings.transitionSpeed, 'linear', function(){
     $group.append('<li class="suga-slide">' + $firstEl + '</li>');
     $(this).remove(); 
     $group.find('li:first').addClass("suga-first");
     transitionScroll();
    });       
  };

  if (settings.snap) {
    window.setInterval(transitionSnap, settings.transitionSpeed);  
  } else {
    transitionScroll();
  }
}

$(window).load(function(){
  $('#logos').suga({
    'transitionSpeed': 2000,
    'snap': true
  });
});
</script>
<style>
.mixingservice {
    background : url("img/parallaxstudio.jpg") repeat fixed 100%;
     background-size: cover;

} 
.general {
    background : url("img/parallaxmain1.jpg") repeat fixed 80% !Important;
     background-size: cover;

}
.distribution {
    background : url("img/parallaxdistribution.jpg") repeat fixed 80% !Important;
     background-size: cover;

}
.webdesign {
    background : url("img/webservice.jpg") repeat fixed 80% !Important;
     background-size: cover;

}
.featuredmusic {
    background : url("img/featured.jpg") repeat fixed 80% !Important;
     background-size: cover;

}

*, *:before, *:after {
  box-sizing: border-box;
}

$bg-color: #d9d8c6;
$primary-color: #5b5a5c;
$secondary-color: darken($primary-color, 15%);

body {
  background: $bg-color;
}

li {
  list-style: none;
}

.suga-container {
  background: $primary-color;
  padding: 3px;
  max-width: 100%;
  margin: 3px auto;
  box-shadow: 3px 3px 0px $secondary-color;
  border: 2px solid $secondary-color;
  border-radius: 5px;
}

.suga-slider-wrap {
  overflow: hidden;
  margin: 3px;
}

.suga-slider-group {
  &:before,
  &:after {
    content: " ";
    display: table;
  }

  &:after {
    clear: both;
  }
}

.suga-slide {
  float: left;
  position: relative;
  margin-left: 0;
  padding-right: 8px;
}

</style>
</head>
<body>
<center>
<!-- Promo Banners -->
<div id="carouselExampleIndicators" class="carousel slide row" data-ride="carousel" height="400px">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="carousel-item">
          <img class="img-fluid" src="img/banner101.jpg"  height="590px" alt="First slide">
        </div>
        <div class="carousel-item active">
          <img class="img-fluid" src="img/digigodbanner.jpg"  height="590px" alt="DigiGod slide">
        </div>
        <div class="carousel-item">
          <img class="img-fluid" src="img/banner2.jpg"  height="590px" alt="Second slide">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
</div>

<!--Introduction-->
<div class="general row">
    <div class="col-md-6 col-sm-12">
        <img src="img/logo.png" class="img-fluid" height="420" width="420"> 
    </div>
    <div class="col-md-6 col-sm-12">
        <br><font color="white"><h1>ILLUMONOPOLY</h1></font>
        <hr style="background-color:#ffffff">
            <div class="box"><br> 
                Welcome to the official website of ILLUMONOPOLY. The Digital Media Mantra. Providing independent businesses and musicians with marketable media solutions to expand thier brands for over 10 years. 
                Its Not what can we do for you. Its more of what cant we do for you. With our dedicated team and staff we can help you evolve your brand to the next level. Let Us Expand Your Brand, Your Sound, Your Visual Production, Your fanbase, Your Social media & web presence.<br><B>LET US HELP YOU EXPAND YOUR BRAND!!!!</b>
                </font>
            </div><br><br>
    </div>
</div>
<!--Featured Music-->
<div class="featuredmusic row">             <br><br><Br>
    <div class="col-lg-3 col-sm-6 box">
        <img src="/img/Do%20ME.jpg" class="img-fluid">  <hr style="background-color:#ffffff"><script src="//www.powr.io/powr.js?external-type=html"></script> 
 <div class="powr-countdown-timer" id="a2995a09_1517179632"></div><br>
    </div>
    <div class="col-lg-3 col-sm-6 box">
        <img src="/img/BMW2.jpg" class="img-fluid"><hr style="background-color:#ffffff"><script src="//www.powr.io/powr.js?external-type=html"></script> 
 <div class="powr-countdown-timer" id="5f7b3d0c_1517204663"></div><br>
    </div>
    <div class="col-lg-3 col-sm-6 box">
        <img src="/img/trillegaltender.jpg" class="img-fluid"><hr style="background-color:#ffffff"><script src="//www.powr.io/powr.js?external-type=html"></script> 
 <div class="powr-countdown-timer" id="8d9a22a1_1517191024"></div><br>
    </div>
    <div class="col-lg-3 col-sm-6 box">
        <img src="/img/digigod%20Album.jpg" class="img-fluid"><hr style="background-color:#ffffff"><script src="//www.powr.io/powr.js?external-type=html"></script> 
 <div class="powr-countdown-timer" id="756a9078_1517191543"></div><br>
    </div>
        <br><br><br>        
</div>
<!--mixingservice-->
<div class="mixingservice row">
    <div class="col-lg-6 col-sm-12">
    </div>
    <div class="col-lg-6 col-sm-12">
        <img src="img/mixservice.png" class="img-fluid"><br>
        <H1>CLIENTS</H1><hr style="background-color:#ffffff">
        <font size="3vh">
        Tory Lanes, Ron Browz, 2 Chainz, J-Hard 360, Dezzy Chamberland, Sig Music, ZaeTheGodd and more....<br>
        </font><br>
        <a href="services" class="navMenu"><button type="button" class="btn btn-danger btn-lg" style="background-color:"red" >Order Now</button></a>        
        <br><br>
    </div>
</div>  
<!--DIVIDER-->
<div class="general row">
    <div class="container-fluid">
        <br><br>
        <h1><img src="img/logo.png" class="img-fluid" height="100" width="100"> expanding brands for the Last decade</h1>
        <br><br>
    </div>
</div>
<!--Artist SPotlight-->
<div class="featuredmusic row"> 
    <div class="col-lg-6 col-sm-6 box">
            <iframe width="100%" height="415" src="https://www.youtube.com/embed/Na8I8cowXiw?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>
    <div class="col-lg-6 col-sm-6 box">
            <iframe width="100%" height="415" src="https://www.youtube.com/embed/dWU4e6kFaaw?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>

</div>
<!--Distribution-->
<div class="distribution row">  
    <div class="col-6">
        <img class="img-fluid" src="img/iphone.png" height="500" width="360">
    </div>
    <div class="col-6" style="padding-top: 30px;  padding-bottom: 30px;">
        <img src="img/distrotext2.png" class="img-fluid">
        <br>
        <img src="img/streams.png" class="img-fluid">
        <br><a href="services" class="navMenu"><button type="button" class="btn btn-primary btn-lg" style="background-color:#000000">Sign Up</button></a>
        <br><br>
    </div>
</div>
<!--Client Logos-->
<center>Previous Clients</center><br>
<div id="logos" class="container">

  <ul>
    <li><img src="img/bobbyvlogo.png" width="100px" height="100px" /></li>
    <li><img src="img/dtplogo.png" width="100px" height="100px" /></li>
    <li><img src="img/premierlogo.png" width="100px" height="100px" /></li>
    <li><img src="img/cokeboyslogo.png" width="100px" height="100px" /></li>
    <li><img src="img/thisis50logo.png" width="100px" height="100px" /></li>
    <li><img src="img/padrinologo.png" width="100px" height="100px" /></li>
     <li><img src="img/neuflogo.png" width="100px" height="100px" /></li>
     <li><img src="img/akamailogo.png" width="100px" height="100px" /></li>
     <li><img src="img/dufflebaglogo.png" width="100px" height="100px" /></li>
     <li><img src="img/streetfelonslogo.png" width="100px" height="100px" /></li>
      <li><img src="img/paylesslogo.png" width="100px" height="80px" /></li>
       <li><img src="img/millyslogo.png" width="100px" height="100px" /></li>
     <li><img src="img/giselle.png" width="90px" height="100px" /></li>
  </ul>
</div>
<!--Artist SPotlight-->

<!--application-->
<div class="webdesign row">
    <div class="col-lg-6 col-sm-12">
        <br><br>
        <img src="img/mactop.png" class="img-fluid">
    </div>
    <div class="col-lg-6 col-sm-12">
        <br><br>
            <div class="container-fluid box">
                <font color="white" size="5vh"><h1>Web & Application Developement</h1><br></font>   
                 Are You In Need of a Website? And or an Mobile Application? <br>
                 Our Team of developers can get your brand up and running and designed to your specifications in just a week.
                 Inquire via email for questions and quotes for custom designs and scripts, websites and applications. 
                 <br>No JOB TOO BIG NO JOB TOO SMALL. LET US EXPAND YOUR BRAND!!!!!<br><br>
                 <a href="services" class="navMenu"><button type="button" class="btn btn-primary btn-lg" style="background-color:#666666">Inquire Now</button></a>
                 <br><br>
            </div><br><br>
    </div>
</div>
<!--googleAdSense--><br><br>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-7512006871298343"
     data-ad-slot="7265345115"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>



<!--footer-->
&copy; ILLUMONOPOLY LLC. ALL RIGHTS RESERVED. 
<br><br><Br> 
</center><br><br><br>
<br><br>
</body>
</html>

【问题讨论】：

标签： ajax html css bootstrap-4

【解决方案1】：

在响应式时使其兼容的最简单方法是使用一些框架，例如引导程序。它是您可以工作的骨架，无需更改逻辑或脚本。

【讨论】：

我正在使用 bootstrap 它是通过 ajax 加载的，将加载此页面和其他内部内容的索引页面扔进了一个 Div
首先，我应该说，您的 html 结构没有通过引导类正确完成。先纠正一下。其次，您的页面有 9 个脚本错误，请尝试修复它，一些与 jQuery 加载相关的警告和错误。修复这些错误。 HTML 应该环绕一个容器，然后是 col-md-12、col-md-6、col-sm-12 等布局元素……我在您的源代码中没有看到任何与布局相关的类。