te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - how to hide div in smartphone or mobile browser - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - how to hide div in smartphone or mobile browser - Stack Overflow

    javascript - how to hide div in smartphone or mobile browser - Stack Overflow

    programmeradmin2浏览0评论

    i want to hide my div if someone visit from smartphone, mobile etc. my javascript code not work for me, please let me know how to fix it?

    <html>
<head>
<title>Test</title>
<script type="text/javascript">
    if (/Android|webOS|iPhone|iPad|iPod|pocket|psp|kindle|avantgo|blazer|midori|Tablet|Palm|maemo|plucker|phone|BlackBerry|symbian|IEMobile|mobile|ZuneWP7|Windows Phone|Opera Mini/i.test(navigator.userAgent)){
     document.getElementById('mybox').style.display = 'none';
     };
</script>
</head>
<body>

<div id="mybox">
Hello world
</div>

</body>
</html>

    i want to hide my div if someone visit from smartphone, mobile etc. my javascript code not work for me, please let me know how to fix it?

    <html>
<head>
<title>Test</title>
<script type="text/javascript">
    if (/Android|webOS|iPhone|iPad|iPod|pocket|psp|kindle|avantgo|blazer|midori|Tablet|Palm|maemo|plucker|phone|BlackBerry|symbian|IEMobile|mobile|ZuneWP7|Windows Phone|Opera Mini/i.test(navigator.userAgent)){
     document.getElementById('mybox').style.display = 'none';
     };
</script>
</head>
<body>

<div id="mybox">
Hello world
</div>

</body>
</html>
    • javascript
    • jquery
    • html
    • css
    Share Improve this question asked Mar 19, 2014 at 11:37 Ahmed iqbalAhmed iqbal 5971 gold badge8 silver badges29 bronze badges 3
    • you can use CSS @media queries to hide any div. By using media query you can target the any device. – Kheema Pandey Commented Mar 19, 2014 at 11:41
    • CSS media Query is the answer for your question. Read article to know more mobile.smashingmagazine./2013/03/05/… – Harish Boke Commented Mar 19, 2014 at 11:43
    • The problem is (I think so) that the code is executed before your html div element has been renderized, if you move the code to the end of your html file It should work. – Roberto Commented Mar 19, 2014 at 11:44
    Add a ment  | 

    7 Answers 7

    Reset to default 3

    You need to use media query to create responsive UI,
    For different screen resolution you should have different CSS for all your HTML ponent(Could be Div/CSS Class etc.)
    Search for some good responsive tutorial you'll surely find that interesting
    Now a days people using Twitter Bootstrap to make the UI responsive, It has many responsive classes those are more useful to create Rapid responsive UI development. Sample

    @media screen and (max-width: 960px) {

}

    Use media query to hide

    @media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#mybox{
display: none
}

    This will hide when screen size below 480px

    You are missing the window.onload

    <html>
<head>
<title>Test</title>
<script type="text/javascript">
    if (/Android|webOS|iPhone|iPad|iPod|pocket|psp|kindle|avantgo|blazer|midori|Tablet|Palm|maemo|plucker|phone|BlackBerry|symbian|IEMobile|mobile|ZuneWP7|Windows Phone|Opera Mini/i.test(navigator.userAgent)){
     window.onload = function (){
         document.getElementById('mybox').style.display = 'none';
     }
   };
</script>
</head>
<body>

<div id="mybox">
Hello world
</div>

</body>
</html>

    But the css approach seems cleaner.

    Remove semicolon of if condition close block:

    if (/Android|webOS|iPhone|iPad|iPod|pocket|psp|kindle|avantgo|blazer|midori|Tablet|Palm|maemo|plucker|phone|BlackBerry|symbian|IEMobile|mobile|ZuneWP7|Windows Phone|Opera Mini/i.test(navigator.userAgent)){
     document.getElementById('mybox').style.display = 'none';
     }//semicolon is removed

    You can hide or show someone on any screen by media queries. 

    @media (min-width: 768px) and (max-width: 979px) {
    .div{
        display : block; For big screen
    }
}
@media (min-width: 380px) and (max-width: 420px) {
    .div{
        display : none; For small screen
    }
}

    hello my friend try this..

    /* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) 
{
        #mybox
        {
            display: none;
        }
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px)
{
        #mybox
        {
            display: none;
        }
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) 
{
        #mybox
        {
            display: none;
        }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) 
{
        #mybox
        {
            display: none;
        }
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) 
{
        #mybox
        {
            display: none;
        }
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) 
{
        #mybox
        {
            display: none;
        }
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px)
{
        #mybox
        {
            display: block;
        }
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px)
{
        #mybox
        {
            display: block;
        }
}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) 
{
        #mybox
        {
            display: none;
        }
}

    Put your JS code at the end of the page or use an onLoad event.

    <html>
<head>
<title>Test</title>
</head>
<body>

<div id="mybox">
Hello world
</div>

<script type="text/javascript">
    if (/Android|webOS|iPhone|iPad|iPod|pocket|psp|kindle|avantgo|blazer|midori|Tablet|Palm|maemo|plucker|phone|BlackBerry|symbian|IEMobile|mobile|ZuneWP7|Windows Phone|Opera Mini/i.test(navigator.userAgent)){
     document.getElementById('mybox').style.display = 'none';
     };
</script>
</body>
</html>

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论