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

Question

移动设备中的2个页面宽度不够100％，您可以看到它here。

我的代码中有<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相关的内容，或者搞砸了我的代码（我是编码的初学者），或者是什么。困惑，因为我的其他页面工作正常，我在代码中看不到任何导致它的宽度变薄的东西。

*顺便说一句 - 还没有弄清楚手机中的导航，但你可以通过查看链接看到它在其他页面中有效： Home

Answer 1

一切正确，但我看到Select，因为您的scroll有一些footer代码。

在此页面中：

  

http://melmencarelli.com/about/

首先，将non-responsive添加到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

在此页面中：

  

http://melmencarelli.com/

执行上述说明然后将.footer-info { float: left; width: 100%; margin-bottom: 25px; } 设置为：

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>

嗯，一切看起来都不错！