Ajax 网站在移动设备上不断调整大小
因此，我在建立了将近一年的网站后，就完成了我的网站，我的网站在我的移动设备上的响应能力出现了问题。我似乎无法找出问题所在。在我继续之前，请帮我弄清楚这件事。我使用Bootstrap4和Ajax来加载页面和模块。这是我需要对网站进行的最后一次更改，以使其对移动设备做出响应Ajax 网站在移动设备上不断调整大小,ajax,html,css,bootstrap-4,Ajax,Html,Css,Bootstrap 4,因此，我在建立了将近一年的网站后，就完成了我的网站，我的网站在我的移动设备上的响应能力出现了问题。我似乎无法找出问题所在。在我继续之前，请帮我弄清楚这件事。我使用Bootstrap4和Ajax来加载页面和模块。这是我需要对网站进行的最后一次更改，以使其对移动设备做出响应 要使其在响应时兼容，最简单的方法是使用一些框架，例如bootstrap。 这是一个可以使用的框架，不需要更改逻辑或脚本。我使用的是引导，它是通过ajax加载的，通过索引页面将此页面和其他内部内容加载到div中。首先，我应该说，
要使其在响应时兼容，最简单的方法是使用一些框架，例如bootstrap。
这是一个可以使用的框架，不需要更改逻辑或脚本。我使用的是引导，它是通过ajax加载的，通过索引页面将此页面和其他内部内容加载到div中。首先，我应该说，引导类没有正确完成html结构。先纠正一下。其次，您的页面有9个脚本错误，请尝试修复这些错误，以及一些与jQuery加载相关的警告和错误。修复这些错误。HTML应该围绕一个容器，然后布局元素，如col-md-12、col-md-6、col-sm-12等。。。。我在源代码中没有看到任何与布局相关的类。
<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>