Question

我的网页的页眉和页脚在移动设备上查看时会有响应，但内容不是。使用的文件是content.php，index.php和content.css。正常的桌面网站显示正常。代码文件如下。

网址为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;
}

Answer 1

您的content_area设置为固定宽度（1080px）如果你只想让它响应，请给它最大宽度为1080px，宽度为100％。

try {
                                int wins = 0;
                                JSONObject jsonObject = new JSONObject(response.body().getData());
                                JSONArray awards = jsonObject.getJSONArray("awards");
                                for(int i=0;i<awards.length();i++)
                                {
                                    JSONObject award = awards.getJSONObject(i);
                                    if(award.getBoolean("won"))
                                        wins++;
                                }
                                System.out.println(wins);
                            } catch (JSONException e) {
                                e.printStackTrace();
                            }

它仍然不漂亮，但反应灵敏; - ）

Answer 2

您还可以使用媒体查询来使容器具有适应性：

@media screen and (min-width: 1180px) {
    /* Code your specific rules for this definition */
}
@media screen... {
    /* Other stuff for other definition */
}

内容在移动设备上无响应

2 个答案: