所以我在建立了近一年后完成了我的网站，我的网站在我的移动设备上的响应能力有问题。我似乎无法找出问题所在。在我继续前进之前，请帮我解决这个问题。我使用bootstrap 4和Ajax来加载页面和模态。这是我需要对网站进行的最后一项更改，以使其对移动设备做出响应。
<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&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&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-->
© ILLUMONOPOLY LLC. ALL RIGHTS RESERVED.
<br><br><Br>
</center><br><br><br>
<br><br>
</body>
</html>
答案 0 :(得分：0)
在响应时使这种兼容的最简单方法是使用一些框架，例如bootstrap。 它是您可以工作的骨架，无需更改逻辑或脚本。