【问题标题】:Page content not showing on mobile devices页面内容未在移动设备上显示
【发布时间】:2014-02-15 15:08:58
【问题描述】:

我正在使用响应式 Wordpress 主题 Nexus,从移动设备查看网站时遇到问题。从桌面查看网站时,帖子内容很好,但主要内容消失了(好像字体颜色变为透明或变为白色),但内容的空间仍然存在。这已经在 Safari 和 Chrome for iOS7(iPhone 和 iPad)上进行了测试。

我已尝试禁用任何可能导致此问题的插件,但无济于事。在桌面上调整浏览器的大小时无法复制该问题,该站点会响应并进行调整而不会丢失任何内容,因此我认为这可能与正在使用的元标记有关,但页眉和页脚内容显示正常.可能与page.php(“默认模板”)有关吗?

当前使用的元标记是:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

可以在 www.cafestylespeedtraining.net 上查看该网站。

这是page.php 文件:

<?php
$featured_image = false;

if ( '' != get_the_post_thumbnail() ) :
    $featured_image = true;
?>
<div class="post-thumbnail">
    <div class="container">
        <h1 class="post-heading"><?php the_title(); ?></h1>
    </div> <!-- .container -->
</div> <!-- .post-thumbnail -->
<?php endif; ?>

<div class="page-wrap container">
    <div id="main-content">
        <div class="main-content-wrap clearfix">
            <div id="content">
                <?php get_template_part( 'includes/breadcrumbs', 'index' ); ?>

                <div id="left-area">

                <?php while ( have_posts() ) : the_post(); ?>

                    <article class="entry-content clearfix">
                    <?php if ( ! $featured_image ) : ?>
                        <h1 class="main-title"><?php the_title(); ?></h1>
                    <?php endif; ?>
                    <?php
                        the_content();

                        wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'Nexus' ), 'after' => '</div>' ) );
                    ?>
                    </article> <!-- .entry -->

                    <?php
                        if ( comments_open() && 'on' == et_get_option( 'nexus_show_pagescomments', 'false' ) )
                            comments_template( '', true );
                    ?>

                <?php endwhile; ?>

                </div>  <!-- end #left-area -->
            </div> <!-- #content -->

            <?php get_sidebar(); ?>
        </div> <!-- .main-content-wrap -->

        <?php get_template_part( 'includes/footer-banner', 'page' ); ?>
    </div> <!-- #main-content -->

    <?php get_footer(); ?>

任何帮助将不胜感激。如果您需要任何其他文件,请告诉我,我会粘贴它们。

【问题讨论】:

    标签: php css wordpress mobile responsive-design


    【解决方案1】:

    这是一个简单的 CSS 问题。

    窃听元素是:

    <h4 class="widgettitle">Book your Cafe Style Facilitator’s Boot Camp</h4>
    

    您可以通过为元素块指定以下样式来检查它:

    display: none;
    

    您还可以使用

    在 Chrome 浏览器中模拟移动行为
    F12 -> settings -> overrides -> emulate
    

    【讨论】:

    • 感谢 Arkilesh 的回复,你是对的!在写这个问题时,我正在下载 Xcode 以使用 Real Device 模拟器,此时我发现了该元素并应用了所需的样式,以便它正确适应!我不知道 Chrome 模拟器,但将来会派上用场 - 谢谢!这解决了我的问题,我会投票给你的答案,但我不能,因为我没有足够的代表!
    • 很高兴它帮助了你:)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-06-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多