Question

我想隐藏我的div如果有人从智能手机，手机等访问我的javascript代码对我不起作用，请告诉我如何修复它？

<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>

Answer 1

您需要使用媒体查询来创建响应式UI，
对于不同的屏幕分辨率，您的所有HTML组件应该有不同的CSS（可能是Div / CSS类等）
搜索一些好的响应式教程，你肯定会觉得有趣
现在有一天人们使用Twitter Bootstrap来使UI响应，它有许多响应类，对创建快速响应式UI开发更有用。样品

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

}

Answer 2

您缺少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>

但是css方法似乎更清晰。

Answer 3

使用媒体查询隐藏

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

当屏幕尺寸低于480px

时，这将隐藏

Answer 4

将您的JS代码放在页面末尾或使用onLoad事件。

<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>

Answer 5

删除if条件关闭块的分号：

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

Answer 6

您可以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
    }
}

Answer 7

你好我的朋友试试这个..

/ *智能手机（人像和风景）----------- * / @media only screen和（min-device-width：320px）和（max-device-width：480px） { #mybox { display：none; } }

/ *智能手机（风景）----------- * / @media only screen and（min-width：321px） { #mybox { display：none; } }

/ *智能手机（人像）----------- * / @media only screen和（max-width：320px） { #mybox { display：none; } }

/ * iPads（人像和风景）----------- * / @media only screen和（min-device-width：768px）和（max-device-width：1024px） { #mybox { display：none; } }

/ * iPads（风景）----------- * / @media only screen和（min-device-width：768px）和（max-device-width：1024px）和（orientation：landscape） { #mybox { display：none; } }

/ * iPads（肖像）----------- * / @media only screen和（min-device-width：768px）和（max-device-width：1024px）和（orientation：portrait） { #mybox { display：none; } }

/ *台式机和笔记本电脑----------- * / @media only screen and（min-width：1224px） { #mybox { 显示：块; } }

/ *大屏幕----------- * / @media only screen and（min-width：1824px） { #mybox { 显示：块; } }

/ * iPhone 4 ----------- * / @media only screen和（-webkit-min-device-pixel-ratio：1.5），只有屏幕和（min-device-pixel-ratio：1.5） { #mybox { display：none; } }

如何在智能手机或移动浏览器中隐藏div

7 个答案: