移动设备中100%视口宽度的问题？

Question

移动设备中的2个页面的宽度不是100%,你可以在这里看到它.

我已经加入了<meta name="viewport" content="width=device-width" />我的代码,我尝试了各种各样的变体.问题可能在我的pages.php文件中,因为其余页面是自定义模板？

这是我的page.php的代码:

<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 */

get_header(); ?>

<div id="primary" class="content-area">
    <div id="content" class="site-content" role="main">
        <?php while ( have_posts() ) : the_post(); ?>

        <?php get_template_part( 'content' ); ?>

        <?php endwhile; // end of the loop. ?>
    </div><!-- #content .site-content -->
</div>

<?php get_footer(); ?>

CSS:

#content {
  margin: 0 auto;
  max-width: 51em;
  background: none;
  float: none;
  margin: 0 auto;
  padding: 0;
}

#primary {
  width: 100%;
}

我不知道我是否遗漏了与wordpress相关的内容,或者搞砸了我的代码(我是编码的初学者),或者是什么.困惑,因为我的其他页面工作正常,我在代码中看不到任何导致它的宽度变薄的东西.

*顺便说一句 - 还没有想出移动设备中的导航,但你可以通过查看链接看到它在其他页面中工作: 主页.

Answer 1

一切都是正确的，但我明白了，scroll因为你footer有一些non-responsive代码。

在此页面中：

http://melmencarelli.com/about/

首先，添加box-sizing: border-box;并#footer-container设置width: 100%如下：

#footer-container {
    width: 100%;
    margin: 0 auto;
    padding: 30px;
    box-sizing: border-box;
}

然后，设置width: 100%，.footer-info如下所示：

.footer-info {
    float: left;
    width: 100%;
    margin-bottom: 25px;
}

在此页面中：

http://melmencarelli.com/

执行上述说明然后设置width: 100%：

@media only screen and (max-width: 1023px) and (min-width: 0px)
@media only screen and (max-width: 1023px) and (min-width: 0px)
@media only screen and (max-width: 500px) and (min-width: 0px)
html input[type="button"] {
    font-size: 14px;
    padding: 20px 20px;
    width: 100%;
}

我也看到这个：

<div class="home-button">
<a href="http://melmencarelli.com/mentoring/">
<input type="button" value="HOW WE WORK TOGETHER">
</a>
</div>

我建议你使用这个：

<div class="home-button">
<a href="http://melmencarelli.com/mentoring/">
<button>HOW WE WORK TOGETHER</button>
</a>
</div>

嗯，一切看起来都不错！