内容在移动设备上不响应
内容在移动设备上不响应
提问于 2017-08-22 14:31:48
我的网页的页眉和页脚在移动设备上查看时会响应，但内容不会。使用的文件是content.php、index.php和content.css。正常的桌面网站显示正常。代码文件如下所示。
url为http://responsive.kkits.in/index.php
content.php
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="content_area">
<?php echo $content; ?>
</div>
</body>
</html>index.php
<?php
include 'header-basic-light.php';
$title = "Home";
$content = '<img src="images/coffee1.png" class="imgLeft" />
<h3>Title 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lectus urna,
viverra in luctus quis, ullamcorper quis lorem. Vestibulum vulputate pellentesque
velit, et placerat dolor pulvinar in. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos himenaeos. Sed sit amet velit at purus elementum
dapibus. Nulla dapibus auctor vulputate. Sed cursus nisi at mauris mollis semper.
Vestibulum consectetur cursus dui sit amet pretium.
</p>
<img src="images/coffee2.png" class="imgRight"/>
<h3>Title 2</h3>
<p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Donec porttitor placerat nunc a consectetur. Ut fermentum eleifend molestie.
Donec fermentum risus sit amet ante cursus cursus. In hac habitasse platea dictumst.
Praesent semper ante ut felis molestie aliquet. Nam quis dui a magna molestie blandit
id et justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Sed felis mauris, mattis a vulputate a, gravida nec metus.
Vivamus elit augue, ullamcorper eget scelerisque vitae, tincidunt eget lorem. Curabitur
id nibh libero, sed pulvinar nisi. Curabitur ultrices, neque in dignissim viverra,
justo nisl dignissim magna, a tempor eros turpis in diam. Suspendisse potenti. Sed
tincidunt est ac elit bibendum nec varius ante vestibulum.
</p>
<img src="images/coffee3.png" class="imgLeft" />
<h3>Title 3</h3>
<p>
In hac habitasse platea dictumst. In purus leo, consequat nec porta a, varius sed
dui. Nulla placerat mollis tincidunt. Praesent at elit mi, a posuere quam. Suspendisse
vel leo eu orci lacinia vestibulum. Fusce vel sem fermentum lectus tempus ultrices.
Morbi arcu sem, rhoncus sit amet rutrum eget, interdum sit amet leo. Ut mattis lorem
vitae dolor tincidunt mattis a lacinia velit. Cras sed nibh at urna imperdiet laoreet
quis a risus.
</p>';
include 'content.php';
include 'footer-distributed-with-contact-form.php';
?>content.css
body
{
font-family: lucida grande ,tahoma,verdana,arial,sans-serif;
background-color: #e9e9e9;
}
body p
{
font-size: 0.8em; /*0.8 previous */
line-height: 1.28;
}
/*#wrapper
{
width: 1080px;
background-color: white;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
}*/
#content_area
{
float: center; /* old left */
text-align: justify;
font-size: 2.2em; /* new line */
width: 1080px; /*new line added*/
/* width: 750px; previous */
margin: 20px 0 20px 0;
margin: 0 auto; /* New line added */
padding: 10px;
}
.imgLeft
{
float: left;
width: 240px;
height: 150px;
margin: 0px 10px 10px 0;
padding: 10px;
}
.imgRight
{
float: right;
width: 200px;
height: 250px;
margin: 0px 0 10px 10px;
padding: 10px;
}Stack Overflow用户
发布于 2017-08-22 14:39:31
你的content_area被设置为一个固定的宽度( 1080px )如果你只是想让它响应，给它一个1080px的最大宽度和一个100%的宽度。
#content_area {
float: center;
text-align: justify;
font-size: 2.2em;
max-width: 1080px;
width: 100%;
margin: 20px 0 20px 0;
margin: 0 auto;
padding: 10px;
}它仍然不漂亮，但反应灵敏;-)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45810397
复制相关文章
相似问题
腾讯云开发者
