过去几周我一直在开发一个网页，我已经完成了桌面版本。目前我正在为移动网站设计一个样式表。但是我遇到了一个问题，内容 div 的大小不会与屏幕的宽度相同。我检查了所有宽度标签和最大宽度标签都设置为 100% 而不是精确的屏幕尺寸。我还使用 js 来获取窗口大小，在我的测试设备上它是 540px；但 div 标签的大小为 980px。我有一个重置 css 样式表，我确保它也不会影响大小。我注意到使用 position:fixed 使其大小正确，但它不会滚动。这是样式表。和 html。对不起，如果我的代码很差。我的职业是应用程序程序员，而不是网页设计师。任何建设性的批评也将不胜感激。
http://jsfiddle.net/justinclev/ma63f3vo/
html, body { height:100%; width:100%;}
body {
background-color:#131720;
font-family: 'helvetica';
text-align:justify;
text-justify:inter-word;
}
.Header {
z-index:95;
position:relative;
width:100%;
height: 35px;
background-color: #039de3;
/*
background: #5078CC; /* Old browsers
background: -moz-linear-gradient(top, #D93F3F 0%, #FF4040 90%, #4C2020 100%); /* FF3.6+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D93F3F), color-stop(90%,#FF4040), color-stop(100%,#4C2020)); /* Chrome,Safari4+
background: -webkit-linear-gradient(top, #D93F3F 0%,#FF4040 90%,#4C2020 100%); /* Chrome10+,Safari5.1+
background: -o-linear-gradient(top, #D93F3F 0%,#FF4040 90%,#4C2020 100%); /* Opera 11.10+
background: -ms-linear-gradient(top, #D93F3F 0%,#FF4040 90%,#4C2020 100%); /* IE10+
background: linear-gradient(to bottom, #D93F3F 0%,#FF4040 90%,#4C2020 100%); /* W3C
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D93F3F', endColorstr='#4C2020',GradientType=0 ); /* IE6-9 */
}
.Header .Title {
float:left;
width:auto;
margin-left:1%;;
position: absolute;
bottom:5px;
font-size: 20px;
color: white;
}
.Container {
position:fixed;
height:auto;
margin-top:65px;
margin-bottom:70px;
}
.Content {
overflow:auto;
min-height: 100%;
background-color:white;
box-shadow: 15px 0 21px -10px black, -15px 0 21px -10px black;
}
.linkButton {
font-family: 'Roboto', cursive;
background: none;
border: none;
font-size: 16px;
color: #ED5555;
text-decoration: none;
cursor: pointer;
}
.HomePageText {
margin:1%;
width:60%;
float:left;
font-size:8px;
}
/*
*
*
* Header
*
*/
.heading {
font-family: 'Roboto', sans-serif;
width: 100%; /* Spans the width of the page */
height: 60px;
z-index:98;
position: fixed;
top: 0px;
background-color:#131720;
/*
background: #5078CC; /* Old browsers *
background: -moz-linear-gradient(top, #063497 0%, #5078CC 90%, #022162 100%); /* FF3.6+ *
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#063497), color-stop(90%,#5078CC), color-stop(100%,#022162)); /* Chrome,Safari4+ *
background: -webkit-linear-gradient(top, #063497 0%,#5078CC 90%,#022162 100%); /* Chrome10+,Safari5.1+ *
background: -o-linear-gradient(top, #063497 0%,#5078CC 90%,#022162 100%); /* Opera 11.10+ *
background: -ms-linear-gradient(top, #063497 0%,#5078CC 90%,#022162 100%); /* IE10+ *
background: linear-gradient(to bottom, #063497 0%,#5078CC 90%,#022162 100%); /* W3C /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#063497', endColorstr='#022162',GradientType=0 ); /* IE6-9 */
}
.BlueBarHeader {
font-family: 'Roboto', sans-serif;
width: 100%; /* Spans the width of the page */
height: 40px;
z-index:98;
position: fixed;
top:25px;
-webkit-box-shadow: 0px 7px 10px 1px rgba(19,23,32, 0.95);
-moz-box-shadow: 0px 7px 10px 1px rgba(19,23,32,0.95);
box-shadow: 0px 7px 10px 1px rgba(19,23,32,0.95);
background-color:#006694;
background: #006694; /* Old browsers */
}
.Logo {
font-size: 24px;
color: white;
position: absolute;
bottom: 10px;
left: 5px;
}
/*Login Style info */
.Login{
position: absolute;
top: 0px;
right:0;
height:25px;
padding-top:5px;
padding-left: 10px;
padding-right:5px;
color: white;
font-size: 15px;
}
.Login a {
font-family: 'Roboto', sans-serif;
font-size: 15px;
color: white;
text-decoration: none;
}
.Login a:hover {
text-decoration:underline;
color: white;
}
#LoginLink {
display: inline-block;
}
/*
* Footer
*
*/
footer{
position:relative;
display:block;
z-index: 99;
width: 100%;
height:50px;
bottom: 0px;
right:0;
padding-top:0px;
color:white;
background-color:#131720;
/*background: #FF4040; /* Old browsers *
background: -moz-linear-gradient(top, #063497 0%, #5078CC 90%, #063497 100%); /* FF3.6+ *
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#063497), color-stop(90%,#5078CC), color-stop(100%,#063497)); /* Chrome,Safari4+ *
background: -webkit-linear-gradient(top, #063497 0%,#5078CC 90%,#063497 100%); /* Chrome10+,Safari5.1+ *
background: -o-linear-gradient(top, #063497 0%,#5078CC 90%,#063497 100%); /* Opera 11.10+ *
background: -ms-linear-gradient(top, #063497 0%,#5078CC 90%,#063497 100%); /* IE10+ *
background: linear-gradient(to bottom, #063497 0%,#5078CC 90%,#063497 100%); /* W3C /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#063497', endColorstr='#063497',GradientType=0 ); /* IE6-9 */
}
.footer{
display:block;
z-index: 99;
width: 100%;
height:35px;
bottom: 20px;
right:0;
padding-top:10px;
font-family: 'Roboto', sans-serif;
text-align:center;
font-size:20px;
color:white;
background-color:#006694;
}
footer a{
text-decoration:none;
font-style:italic;
color:white;
}
footer a:hover {
text-decoration:underline;
}
网页
<?php
include_once '/includes/db_connect.php';
include_once '/includes/functions.php';
sec_session_start();
if (login_check($mysqli) == true) {
$logged = 'in';
} else {
$logged = 'out';
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Imagine That</title>
<?php
include_once '/includes/includes.php';
?></head>
<body>
<div class="Content">
<div class="Container">
<div class="Header">
<div class="Title">Welcome to the Imagine That website!</div>
</div>
<div class="HomePageText">
This site is dedicated to furthering my knowledge of coding as well as web design. If you take a look around which I hope you will.
You will notice that I have quite a bit of features in this site that aren't necessary and some that may just seem obsurd for a digital Portfolio.
Well before you leave thinking I've gone mad and don't know what I'm doing. Allow me to explain the method to my madness, because trust me there is one.
This site has two purposes. The first is to be a digital portfolio displaying my knowledge of code and different projects I have created.
The second is to be a playground for my imagination to come up with new and cool things. To keep it simple this is a digital porfolio displaying all the things that I have learned about web design and coding.
Some of these features can only be accessed by creating a account, Now I know what your thinking. Why should I create a account to such a small website for one guy that serves no purpose for me. Well, To be frank this site does serve a purpose to not only I, but also the new developer looking for source code on odd projects. The projects I post on here will include either their full source code or small fragments for the complicated parts of the program. I will go over a bit of it to teach beginners how to create and do the things I have created already.
So again bare with me and create an account. It's easy and won't take you much time. After that feel free to look around and explore my creation.
</div>
<div style="width:37%; height:100%; float:right;">
<img style="width:95%; height:auto;margin:0 auto; margin-top: 15px;" src="Photos/307470_2505425680003_1303200128_n.jpg" />
</div>
</div>
</div>
<?php
include_once 'Footer.php';
?>
</body>
</html>
将此添加到您的 HTML 页面的头部
<meta name="viewport" content="width=device-width, initial-scale=1.0">