我不想在移动视图中显示 <div> [关闭]答案

【问题标题】：I don't want to display a <div> in mobile views [closed]我不想在移动视图中显示 <div> [关闭]
【发布时间】：2014-07-18 20:14:16
【问题描述】：

我用php做了一个网站，在php主页文件中有一些<div>标签。效果很好。但我不想在移动视图中显示<div>。我正在尝试学习一些 JavaScript 功能，如 screen.width、screen.innerWidth 等。我尝试在 JavaScript 中使用 screen.width 和 if...else 语句，但仍然不成功。代码应该是什么：

在台式机和笔记本电脑中显示<div id="got">Example</div>，但不能在宽度小于 500 像素的设备中显示。主页文件是php的，那么推荐在里面使用javascript吗？还是首选php？

【问题讨论】：

1) 发布您当前的代码，2) 请记住，您可以在不使用 js 的情况下使用 css3 实现此目的（搜索媒体查询）

标签： javascript php width

【解决方案1】：

@media screen and (max-width: 500px) {
  #got {
      display：none；
    }
}

【讨论】：

请解释您的答案，使其对其他 OP 和其他读者更有用。

【解决方案2】：

我认为用 PHP 检测屏幕宽度是不可能的。

但您可以轻松检测是否是移动设备。

为此，请使用以下代码。

<?php
$ua = $_SERVER['HTTP_USER_AGENT']
if (
stristr($ua, "Windows CE") or
stristr($ua, "AvantGo") or
stristr($ua,"Mazingo") or
stristr($ua, "Mobile") or
stristr($ua, "T68") or
stristr($ua,"Syncalot") or
stristr($ua, "Blazer") ) {
  $DEVICE_TYPE="MOBILE";
}
if (!(isset($DEVICE_TYPE) and $DEVICE_TYPE=="MOBILE")) {

 //put  your div to be not shown on mobile devices here.

}
?>

或使用下面的 javascript 代码。

<script type="text/javascript">
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
     document.getElementById('got').style.display = "none";
    }
</script>

或下面的css代码

<style type="text/css">
    @media only screen and (max-width : 480px) {
        #got {
                 display: none;
                 }
    }
</style>

希望对你有帮助

【讨论】：