我正在努力让移动设备的可比性在我的网站和我的所有容器上运行 <div>有一个 max-width: 1000px;和一个 width:100%;所以我的网站应该能够达到 1000px，然后有 <div>去 100%，但那没有发生。在电脑上是这样，但在移动设备上网站显示为 1000 像素宽，所以我非常困惑。
这是一个 link ，希望你们有想法。
我会在这里发布我所有的代码，只是因为我认为我必须..
HTML
<html>
<head>
<link href="css/reset.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700,100' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="section1">
<div id="section1content">
<div id="logoimg">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="300" height="300" viewBox="0 0 1898.000000 1898.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Darryl Huffman's logo
</metadata>
<g id="ttt" transform="translate(0.000000,1898.000000) scale(0.100000,-0.100000)"
stroke="none">
<path d="M9120 18974 c-529 -29 -891 -69 -1315 -145 -2509 -455 -4719 -1889
-6156 -3994 -886 -1299 -1437 -2805 -1598 -4375 -39 -372 -45 -519 -45 -970 0
-451 6 -598 45 -970 135 -1319 547 -2601 1204 -3745 718 -1252 1699 -2313
2890 -3126 967 -660 2065 -1141 3203 -1403 494 -114 929 -180 1462 -223 303
-24 1057 -24 1360 0 533 43 968 109 1462 223 2169 500 4108 1762 5445 3545
1040 1387 1675 3010 1852 4729 39 372 45 519 45 970 0 451 -6 598 -45 970
-161 1570 -712 3076 -1598 4375 -813 1190 -1875 2173 -3125 2890 -1228 704
-2583 1118 -4026 1231 -182 14 -907 26 -1060 18z m1180 -307 c365 -39 851
-113 1105 -168 349 -76 832 -204 925 -246 25 -11 90 -35 145 -53 198 -65 572
-210 800 -311 209 -92 901 -455 975 -511 14 -11 129 -85 255 -166 297 -191
329 -213 601 -424 280 -216 293 -227 496 -408 203 -181 417 -389 607 -591 154
-164 458 -515 501 -577 14 -21 89 -121 167 -223 133 -174 396 -561 458 -674
16 -27 47 -79 70 -115 122 -190 409 -745 527 -1019 70 -164 208 -525 253 -661
21 -63 50 -146 66 -185 35 -86 139 -451 180 -629 16 -72 43 -191 60 -263 36
-160 90 -473 123 -718 66 -476 76 -646 76 -1235 0 -589 -10 -759 -76 -1235
-33 -245 -87 -558 -123 -718 -17 -72 -44 -191 -60 -263 -41 -178 -145 -543
-180 -629 -16 -38 -45 -122 -66 -185 -45 -136 -183 -497 -253 -661 -118 -274
-405 -829 -527 -1019 -23 -36 -54 -87 -70 -115 -62 -113 -325 -500 -458 -674
-78 -102 -153 -202 -167 -223 -43 -62 -347 -413 -501 -577 -190 -202 -404
-410 -607 -591 -203 -181 -216 -192 -496 -408 -272 -211 -304 -233 -601 -424
-126 -81 -241 -155 -255 -166 -74 -56 -766 -419 -975 -511 -228 -101 -602
-246 -800 -311 -55 -18 -120 -42 -145 -53 -93 -42 -576 -170 -925 -246 -262
-57 -754 -131 -1115 -168 -258 -27 -1342 -27 -1600 0 -361 37 -853 111 -1115
168 -349 76 -832 204 -925 246 -25 11 -90 35 -145 53 -198 65 -572 210 -800
311 -209 92 -901 455 -975 511 -14 11 -128 85 -255 166 -297 191 -329 213
-601 424 -280 216 -293 227 -496 408 -203 181 -417 389 -607 591 -154 164
-458 515 -501 577 -14 21 -89 121 -167 223 -133 174 -396 561 -458 674 -16 28
-47 79 -70 115 -122 190 -409 745 -527 1019 -70 164 -208 525 -253 661 -21 63
-50 147 -66 185 -35 86 -139 451 -180 629 -16 72 -43 191 -60 263 -73 326
-151 863 -184 1266 -21 262 -21 1112 0 1374 33 403 111 940 184 1266 17 72 44
191 60 263 41 178 145 543 180 629 16 39 45 122 66 185 45 136 183 497 253
661 118 274 405 829 527 1019 23 36 54 88 70 115 62 113 325 500 458 674 78
102 153 202 167 223 43 62 347 413 501 577 190 202 404 410 607 591 203 181
216 192 496 408 272 211 304 233 601 424 127 81 241 155 255 166 74 56 766
419 975 511 228 101 602 246 800 311 55 18 120 42 145 53 93 42 576 170 925
246 275 59 794 137 1110 165 94 9 188 17 210 20 22 2 312 2 645 1 481 -2 637
-5 760 -18z"/>
<path d="M9045 18469 c-2011 -103 -3912 -866 -5437 -2181 -890 -768 -1628
-1718 -2161 -2785 -620 -1239 -947 -2624 -947 -4013 0 -2161 782 -4256 2199
-5890 776 -895 1712 -1620 2778 -2153 1480 -741 3152 -1058 4803 -911 1886
167 3655 917 5092 2156 890 768 1628 1718 2161 2785 1008 2013 1220 4348 592
6513 -484 1667 -1447 3171 -2753 4298 -987 852 -2136 1475 -3382 1837 -945
274 -1973 394 -2945 344z m-2134 -4989 c767 -59 1441 -277 2034 -658 232 -149
400 -285 611 -496 401 -401 680 -842 878 -1389 80 -221 161 -540 191 -749 l6
-48 1530 0 1529 0 0 1675 0 1675 935 0 935 0 0 -4005 0 -4005 -935 0 -935 0 0
1695 0 1695 -1527 -2 -1526 -3 -23 -140 c-110 -660 -389 -1285 -808 -1809
-114 -143 -398 -425 -549 -545 -590 -467 -1313 -760 -2117 -855 -273 -33 -452
-36 -2092 -36 l-1648 0 0 4005 0 4005 1688 0 c1068 0 1737 -4 1823 -10z m3729
-1367 c0 -757 -2 -1374 -4 -1372 -2 2 -18 54 -35 114 -71 241 -214 573 -350
810 -86 148 -221 346 -327 480 -121 151 -402 431 -557 554 -147 116 -379 273
-515 346 l-92 50 0 198 0 197 940 0 940 0 0 -1377z m0 -5253 l0 -1380 -940 0
-940 0 0 199 c0 190 1 200 20 206 33 11 299 174 404 248 330 234 638 543 882
883 138 194 299 486 398 724 53 126 166 454 166 483 0 9 2 17 5 17 3 0 5 -621
5 -1380z"/>
<path d="M5280 9485 l0 -2576 753 4 c800 4 822 5 1062 57 405 88 800 313 1056
603 326 369 514 821 596 1434 22 167 21 770 -3 963 -87 731 -385 1314 -849
1666 -266 202 -551 323 -920 391 l-140 26 -777 4 -778 4 0 -2576z"/>
</g>
</svg>
</div>
</div>
</div>
<div id="topspace"></div>
<div id="polygons">
<div id="poly1" class="poly"></div>
<div id="poly2" class="poly"></div>
<div id="poly3" class="poly"></div>
<div id="poly4" class="poly"></div>
<div id="poly5" class="poly"></div>
<div id="poly6" class="poly"></div>
<div id="poly7" class="poly"></div>
<div id="poly8" class="poly"></div>
<div id="poly9" class="poly"></div>
<div id="poly10" class="poly"></div>
<div id="poly11" class="poly"></div>
<div id="poly12" class="poly"></div>
<div id="poly13" class="poly"></div>
<div id="poly14" class="poly"></div>
<div id="poly15" class="poly"></div>
<div id="poly16" class="poly"></div>
<div id="poly17" class="poly"></div>
<div id="poly18" class="poly"></div>
<div id="poly19" class="poly"></div>
<div id="poly20" class="poly"></div>
<div id="poly21" class="poly"></div>
<div id="poly22" class="poly"></div>
<div id="poly23" class="poly"></div>
<div id="poly24" class="poly"></div>
<div id="poly25" class="poly"></div>
<div id="poly26" class="poly"></div>
<div id="poly27" class="poly"></div>
<div id="poly28" class="poly"></div>
<div id="poly29" class="poly"></div>
<div id="poly30" class="poly"></div>
</div>
<div class="section" id="section2">
<div class="wrapper">
<h1>ABOUT ME</h1>
<h2>Just a little bit</h2>
<br>
<p>I'm <a href="https://plus.google.com/u/0/113531286870327023925/posts" target="_blank">Darryl Huffman</a>!
I am a self taught web designer and developer who's 16.<br>
<br>
What am I doing?   Well, if you don't see me glued to my laptop, I'm probably slaying an ender dragon.   Or quite possibly, I have gone and discovered a way to travel through time and I am probably being chased by a T-Rex.
<br>
<br>
However, when I'm not playing around with my time machine, I spend my time designing and developing with the hope to simplify and brighten our everyday lives.</p>
<div class="wrapper2">
<p>
I like to make websites more than just websites. <br>
I like to make websites, <span id="quoteart">Art</span>.
</p>
</div>
</div>
</div>
<div class="section">
<div class="wrapper">
<h1>WORKS</h1>
<h2>As in things I've worked on</h2>
<br>
<div style="text-align: center;">
<img src="images/portfolio/gravitychimp.png" width="200" class="workimg" id="gravchimp">
<img src="images/portfolio/hmf.png" width="200" class="workimg" id="hmf">
<img src="images/portfolio/sotare.png" width="200" class="workimg" id="sotare">
<img src="images/portfolio/trisearching.png" width="200" class="workimg" id="trisearch">
</div>
<h3 id="work_label"></h3><img id="close_work" src="images/svg/x.svg" style="float:right; width:50px; cursor:pointer;">
<br>
<p id="work_text">
</p>
</div>
</div>
<div class="section" >
<div class="wrapper">
<div class="wrapper" style="border-bottom:none; padding-bottom:0px;">
<h1>CONTACT</h1>
<h2>As in things I've worked on</h2>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="scripts.js" type="text/javascript"></script>
<script src="js/plax.js" type="text/javascript"></script>
</body>
</html>
CSS
::-moz-selection { /* Code for Firefox */
color: #fff;
background: #000;
}
@font-face {
font-family: 'allura';
src: url('fonts/Allura.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
body {
cursor: url(images/cursor/Normal%20Select.cur), auto;
transition: background .5s;
background-color: #fff;
}
p{
cursor: url(images/cursor/Text%20Select.cur), auto;
}
h1{
cursor: url(images/cursor/Text%20Select.cur), auto;
}
h2{
cursor: url(images/cursor/Text%20Select.cur), auto;
}
h3{
cursor: url(images/cursor/Text%20Select.cur), auto;
}
::-webkit-scrollbar{width: 5px;}
::-webkit-scrollbar-thumb {background-color:#000000;}
::-webkit-scrollbar-track {background-color:#FFFFFF;}
/* END CSS Code for Scrollbar END */
::selection {
color: #fff;
background: #000;
}
.poly {
background-image: url(images/svg/poly.svg);
background-size: contain;
background-repeat: no-repeat;
height:200px;
width:100px;
position: absolute;
}
#section1content {
position: absolute;
top:30%;
width:100%;
text-align: center;
transition: all 1s;
}
#section1 {
width:100%;
height:100%;
position: fixed;
z-index: 1;
transition: all 1s;
}
.section {
width:100%;
position: relative;
z-index: 2;
background-color: #fff;
font-family: 'Raleway', sans-serif;
}
#polygons {
height:100%;
width: 100%;
position: fixed;;
z-index: 0;
top:0px;
-webkit-animation: polyfade .5s; /* Chrome, Safari, Opera */
animation: polyfade .5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes polyfade {
0% {opacity: 0;}
100% {opacity: 1;}
}
/* Standard syntax */
@keyframes polyfade {
0% {opacity: 0;}
100% {opacity: 1;}
}
body {
overflow-x: hidden;
}
#logoimg {
-webkit-animation: logoimg 1s; /* Chrome, Safari, Opera */
animation: logoimg 1s;
width:298px;
height:295px;
margin-left:auto;
margin-right: auto;
border-radius: 50%;
transition: all 1s;
background-color: #fff;
cursor: url(images/cursor/Link%20Select.cur), auto;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes logoimg {
0% {opacity: 0}
50% {opacity: 0}
100% {opacity: 1}
}
/* Standard syntax */
@keyframes logoimg {
0% {top: 0px;}
100% {top: 100px;}
}
#ttt {
transition: all 1s;
}
#section2 {
}
.wrapper {
width:100%;
max-width: 1000px;
padding-top: 50px;
padding-bottom: 50px;
margin-left: auto;
margin-right: auto;
border-bottom: #E0E0E0 solid 1px;
}
h1 {
font-size: 35px;
font-weight: 700;
}
h3 {
font-size: 30px;
font-weight: 700;
}
h2 {
margin-left: 5px;
color:#acacac;
}
p {
margin-left: 8px;
color: #727272;
font-family: 'Lato', sans-serif;
}
a {
transition: all .5s;
color: #727272;
border-bottom: #d8d8d8 2px solid;
text-decoration: none;
cursor: url(images/cursor/Link%20Select.cur), auto;
}
a:hover{
color: #009cff;
}
#topspace {
height:100%;
width: 100%;
}
#logoimg:hover{
background-color: #000;
}
svg:hover #ttt { fill: #fff; }
#quoteart {
font-family: allura;
font-size: 50px;
}
.quote_from {
float:right;
}
.wrapper2 {
width:100%;
max-width: 1000px;
padding-top: 50px;
font-family: lato;
font-weight: 300;
margin-left: auto;
margin-right: auto;
font-size: 20px;
text-align: center;
}
@-webkit-keyframes kaboom {
from {margin-left: 0px;}
to {margin-left: 50px;}
}
/* Standard syntax */
@keyframes kaboom {
from {background-color: #fa2424;}
to {background-color: #fa2424;}
}
.workimg {
cursor: url(images/cursor/Link%20Select.cur), auto;
width:200px;
height:auto;
-webkit-filter: grayscale(1);
filter: grayscale(1);
transition: all .5s;
}
.workimg:hover {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
#close_work {
display:none;
}
.formfield {
margin-bottom: 30px;
}
.formfield .col {
float: left;
width: 48.5%;
}
.formfield .col.second {
float: right;
}
.formfield .input-holder {
margin: 0px 0px;
}
input.text, #form-contact textarea {
height: 58px;
color: #7f8c8d;
font-family: Raleway;
font-size: 24px;
border: 1px solid #a5aeaf;
padding: 2px 20px 0px;
margin-left: -21px;
outline: none;
width: 100%;
}
#section4 {
max-width:1392px;
}
#form-contact .formfield {
margin-bottom: 30px;
}
textarea {
color: #7f8c8d;
font-family: 'Raleway';
padding: 20px;
height: 150px;
font-size: 14px;
line-height: 18px;
resize: none;
border: 1px solid #a5aeaf;
margin-left: -21px;
outline: none;
width: 100%;
margin-top:30px;
}
#send-message {
width: 225px;
height: 50px;
background-color: #fff;
color: #a5aeaf;
font-family: 'Raleway';
font-size: 18px;
cursor: url(images/cursor/Link%20Select.cur), auto !important;
float: left;
border: 1px solid #a5aeaf;
-webkit-transition: all 200ms linear;
-o-transition: all 200ms linear;
-moz-transition: all 200ms linear;
transition: all 200ms linear;
}
#send-message:hover {
color: #8f999a;
border: 1px solid #8f999a;
}
#result {
font-size: 14px;
float: right;
color: #99a3a4;
margin-top: 18px;
text-transform: uppercase;
}
JavaScript
$(function() {
// Get the form.
var form = $('#ajax-contact');
// Get the messages div.
var formMessages = $('#result');
// Set up an event listener for the contact form.
$(form).submit(function(e) {
// Stop the browser from submitting the form.
e.preventDefault();
// Serialize the form data.
var formData = $(form).serialize();
// Submit the form using AJAX.
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
// Set the message text.
$(formMessages).text(response);
// Clear the form.
$('#name').val('');
$('#email').val('');
$('#message').val('');
})
.fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
// Set the message text.
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your message could not be sent.');
}
});
});
});
$(document).ready(function () {
makebg(1);
});
$("#sotare").click(function(){
$("#close_work").css({"display": "block"});
$("#work_label").text( "Sotare" );
$("#work_text").html( "I manipulated stylesheets to make the Sotare store match the wordpress theme my client had on his website.<br><br>What I did - Code." );
});
$("#hmf").click(function(){
$("#close_work").css({"display": "block"});
$("#work_label").text( "Hide my File" );
$("#work_text").html( "A batch file I created for windows, I wanted to share so I made it a site.<br><br>What I did - Design and Code." );
});
$("#gravchimp").click(function(){
$("#close_work").css({"display": "block"});
$("#work_label").text( "Gravity Chimp" );
$("#work_text").html( "An Android app I made, which is a part of the flappy idea. I made it a website and it is soon to be released on iOS.<br><br>What I did - Design and Code." );
});
$("#trisearch").click(function(){
$("#close_work").css({"display": "block"});
$("#work_label").text( "TriSearching" );
$("#work_text").html( "How about you, try searching with TriSearching! It's a design of a search engine, and the results are swiped over, using Bing.<br><br>What I did - Design and Code." );
});
$("#close_work").click(function(){
$("#close_work").css({"display": "none"});
$("#work_label").text( "" );
$("#work_text").html( "" );
});
var bgcolor = "white";
$("#ttt").click(function(){
if(bgcolor == "white"){
$("body").css({"background-color": "#009cff"});
bgcolor = "blue";
} else{ if(bgcolor == "blue"){
$("body").css({"background-color": "#fff"});
bgcolor = "white";
}
}
});
var currentpoly = 1;
$(window).scroll(function() {
$("#polygons").css({
'opacity' : 1-(($(this).scrollTop())/600)
});
});
function makebg(currentpoly){
if(currentpoly < 31){
var width = randomIntFromInterval(50,300);
var height = width * 2;
var rotation = randomIntFromInterval(1,360);
var top = randomIntFromInterval(1,70);
var left = randomIntFromInterval(10,90);
var opacity = randomIntFromInterval(1,20);
var range = randomIntFromInterval(10,60);
$("#poly" + currentpoly).css({
"width": width,
"height": height,
"-webkit-transform": "rotate(" + rotation + "deg)",
"transform": "rotate(" + rotation + "deg)",
"-ms-transform": "rotate(" + rotation + "deg)",
"top": top + "%",
"left": left + "%",
"opacity": "." + opacity
});
$(document).ready(function () {
var toggleStatus = 'small'
setSmall()
$.plax.enable()
$("#range-small").click(function(){
if(toggleStatus != 'small'){
toggleRange()
}
})
$("#range-big").click(function(){
if(toggleStatus != 'big'){
toggleRange()
}
})
function toggleRange() {
if(toggleStatus == 'small'){
setBig()
} else if (toggleStatus == 'big') {
setSmall()
} else {
console.log(toggleStatus)
}
$("#range-big").toggleClass('active')
$("#range-small").toggleClass('active')
return false
}
function setSmall(){
$("#poly" + currentpoly).plaxify({"xRange":range,"yRange":range});
toggleStatus = 'small'
}
})
currentpoly = currentpoly + 1;
makebg(currentpoly);
}
}
function randomIntFromInterval(min,max)
{
return Math.floor(Math.random()*(max-min+1)+min);
}
请注意，我还没有让我的代码 super 干净，因为我正在制作它，所以我的 JS 和其他代码将来会更好，大声笑。提前致谢!
最佳答案
如果它可以在您的计算机上运行但不能在移动设备上运行，请确保您在 head 标签内设置视口(viewport):
<meta name="viewport" content="width=device-width, initial-scale=1.0">
我不是 100% 确定你想要发生什么，但假设你希望网站的最大宽度为 1000 像素，并且当你缩小它时它会缩小，你需要设置主要内容(在本例中是第一个div 部分 1) 到 max-wdith 1000px。
也可能是您的嵌套 div 之一设置了错误的宽度百分比/值，导致它无法收缩。
如果有任何帮助，请告诉我。
关于javascript - 移动兼容网站，不去..移动宽度....？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25476633/