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

Question

我在移动设备中的 2 个页面没有达到 100% 的宽度，您可以看到它here。

我的代码中有<meta name="viewport" content="width=device-width" />，我尝试了它的各种变体。问题可能出在我的pages.phpfile 中，因为其余页面都是自定义模板？

这是我的 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 相关的内容，或者弄乱了我的代码（我是编码的初学者），或者是什么。很困惑，因为我的其他页面工作正常，而且我在代码中看不到任何导致其宽度变窄的内容。

*btw - 尚未弄清楚移动设备中的导航，但您可以通过查看链接看到它在其他页面中有效： Home.

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>

好吧，一切看起来都不错！