Question

我有一个网站http://news.homepage119.biz/。我在我的网站上创建了两个按钮，我已经修复了页面底部，我想用它在我的网站的桌面和移动模式之间切换。但是，当我在调整浏览器窗口大小时显示实际在移动设备上显示时，按钮不会显示。请问你能帮我解决这个问题吗？这是我的代码：

<?php
session_start();
if($_GET['w'] == 'm') {
    $_SESSION['mobilemode'] = 'true';
}

if($_GET['w'] == 'pc') {
    $_SESSION['mobilemode'] = 'false';
}

?>
<!doctype html >

<!--[if IE 8]>    <html class="ie8" lang="en"> <![endif]-->

<!--[if IE 9]>    <html class="ie9" lang="en"> <![endif]-->

<!--[if gt IE 8]><!--> <html <?php language_attributes(); ?>> <!--<![endif]--><head>

<title><?php wp_title('|', true, 'right'); ?></title>
<meta charset="<?php bloginfo( 'charset' );?>" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<script src="http://code.jquery.com/jquery-latest.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>  

<?php global $wp;
$current_url = home_url(add_query_arg(array(),$wp->request)); ?> 



<script type="text/javascript">

var cururl = window.location.href;
if(cururl == 'http://news.homepage119.biz/?w=m'){
    window.location.replace("http://news.homepage119.biz");
}

else if((cururl == 'http://news.homepage119.biz/?w=pc')){
    window.location.replace("http://news.homepage119.biz");
}

</script>






<?php
if($_SESSION['mobilemode'] == 'true') {
    /* MOBILE MODE */
    ?>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style type="text/css">
                .mobbtn{display: none}
        .deskbtn{display: block;background: #333;text-align: center;width: 100%;position: fixed;z-index: 1000000000;bottom: -1px;padding:10px;}

    </style>
    <?php
} else {
    // DEFAULT
    ?>
    <meta name="viewport">
    <style type="text/css">
        .deskbtn{display:none;}
        .mobbtn{display: block;background: #333;text-align: center;width: 100%;position: fixed;z-index: 1000000000;bottom: -1px;padding:10px;}
    <?php
}
?>


<?php

    wp_head(); /** we hook up in wp_booster @see td_wp_booster_functions::hook_wp_head */

?>
<style>
@media(min-width:768px){
.deskbtn{display:none}
.mobbtn{display:none}
}
</style>
</head>





<body <?php body_class() ?> itemscope="itemscope" itemtype="<?php echo td_global::$http_or_https?>://schema.org/WebPage">
<a href="<?php echo $current_url; ?>/?w=m" class="mobbtn">Switch to Mobile View</a><a href="<?php echo $current_url; ?>/?w=pc" class="deskbtn">Switch to Desktop View</a>

Answer 1

听起来像是css或设备问题，而不是php。

我注意到你使用php输出基于$ _SESSION ['mobilemode']的mobbtn样式后，你可以使用静态css来改变显示的样式：none

css从上到下读取，你的第二个显示声明：none将取代你更动态的作业。如上所述，如果您的窗口宽度为768px或更高，则在任一模式下都不会显示任何按钮。移动设备通常不会有大于768的宽度，但也许你的报道就是这样。

你当前的实时代码是使用？w = pc用于桌面而不是？w = w所以我现在陷入了移动模式

按钮未在移动模式下显示

1 个答案: