Question

如果正在使用的浏览器是移动设备，我无法操纵我的代码来隐藏一个特定的DIV。

背景故事：我正在构建一个自定义的WordPress模板，我的设计完全响应，除了一个特定的DIV，我正在使用一些悬浮技术，看起来不像使用触摸屏，所以我想要如果用户正在使用移动设备，则只隐藏该部分。

我做了一些搜索，发现这个小巧的代码可以检测出浏览器是否是一个移动设备（如果确实存在，请随时指向一个更好的代码，但没有任何巨大或任何东西），我目前只有它给出了一个警告框，告诉我它是否是移动浏览器：

<script type="text/javascript"> 
    var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
    if (mobile) { alert("MOBILE DEVICE!!"); } else { alert("NOT A MOBILE DEVICE!!"); }
</script>

现在我想做的就是让它基本上说：

if (mobile) { .navWrap {display: none;} }

我知道这不是一个正常运行的代码，我使用getElementById进行了一些测试，但无法弄清楚如何实现我的目标。我确实将我的.navWrap类更改为#navWrap，因此getElementById可以选择它，但这也不起作用。

那么，你们中任何一位出色的天才能够帮助我吗？谢谢！

Answer 1

您可以使用此缩小的jQuery代码段来检测您的用户是否正在使用移动设备进行查看; jQuery.browser.mobile

如果浏览器是移动设备，jQuery.browser.mobile将为true

您可以尝试以下代码：

   <script type="text/javascript"> 
    var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
    if (mobile) { 
        alert("MOBILE DEVICE!!");
        $('.navWrap').css('display', 'none'); // OR you can use $('.navWrap').hide();
    } 
    else 
    { 
       alert("NOT A MOBILE DEVICE!!"); 
    }
</script>

Answer 2

你确定你真的关心设备是否可以移动？在大多数情况下，您只关心屏幕尺寸。

我强烈建议您使用CSS来有条件地显示内容，请参阅CSS media query to target iPad and iPad only?或iPhone 5 CSS media query等问题。

此外，您似乎真的对检测触摸屏而不是移动设备感兴趣。有许多触摸屏设备不可移动。也有技术可以做，请参考What's the best way to detect a 'touch screen' device using JavaScript?或Best way to detect touchscreens (ipad, iphone, etc)?之类的内容。

Answer 3

如果你可以使用jquery，试试这个：

<script>
     var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
     if (mobile) {$('.navWrap').hide();}
</script>

Answer 4

使用jQuery：

if(mobile) {
    $('.navWrap').hide();
}

Answer 5

您可以使用媒体查询。例如，如果您有一个目标移动设备，则可以通过将其放入媒体查询中来轻松隐藏您的div。

Answer 6

if (mobile) {
     document.getElementById("navWrap").style.display = "none"
}

注意 - 我假设navWrap是id，而不是类。如果你想使用class，那么使用getElementsByClassName并且不要忘记循环结果。

Answer 7

这就是您不想自己维护UA字符串的原因：

从那些做了这个时间的人那里拿出来 - 你应该畏缩UA嗅闻的想法。有一个时间和地点，比如在Firefox中修复一个bug ...但我在12年的职业生涯中只做了几次。
您当前的问题可以通过媒体查询解决。如果你不同意，那么你需要更好地理解媒体查询（不要试图粗鲁）。
你永远不会真正信任UA字符串。一些移动浏览器只是模仿桌面浏览器，以便从任何进行UA嗅探的人那里获得桌面网站服务。
您应该假设每个屏幕尺寸的设备 - 从200x200到6000x6000。事实上，你和你的妻子拥有766像素宽的设备，这是一个完美的例子，因为我从来不知道这些设备在今天之前就已经存在了...但是我在2年前开始为它们编码，因为我放弃了我知道什么的假设屏幕的大小。
以下是来自detectmobilebrowsers.com的“移动UA”探测器的示例。我非常喜欢建立正则表达式，但是这个只是让我呕吐，没有任何东西可以维持或升级。

/（android | bb \ d + | meego）。+ mobile | avantgo | bada / | blackberry | blazer | compal | elaine | fennec | hiptop | iemobile | ip（hone | od）| iris | kindle | lge | maemo | midp | mmp | mobile。+ firefox | netfront | opera m（ob | in）i | palm（os）？| phone | p（ixi | re）/ | plucker | pocket | psp | series（4 | 6）0 | symbian | treo | up。（浏览器|链接）| vodafone | wap | windows（ce | phone）| xda | xiino / i.test（ua）|| / 1207 | 6310 | 6590 | 3gso | 4thp | 50 [1 -6] i | 770s | 802s | a wa | abac | ac（er | oo | s - ）| ai（ko | rn）| al（av | ca | co）| amoi | an（ex | ny | yw） | aptu | ar（ch | go）| as（te | us）| attw | au（di | -m | r | s）| avan | be（ck | ll | nq）| bi（lb | rd）| bl （AC | AZ）| BR（E | v）的W | bumb | BW-（N | U）| C55 / | CAPI | CCWA | CDM-|细胞| CHTM | CLDC | CMD- |ω（MP | ND）|嗉|大（它| LL | NG）| dbte | DC-S |德维| DICA | dmob |做（C | p）的直径：| DS（12 | -d）| EL（49 | AI）| EM（L2 | ul）| er（ic | k0）| esl8 | ez（[4-7] 0 | os | wa | ze）| fetc | fly（ - | ）| g1 u | g560 | gene | gf-5 | g-mo | go（.w | od）| gr（ad | un）| haie | hcit | hd-（m | p | t）| hei- | hi（pt | ta）| hp（i | ip）| hs-c | ht（c（ - | | | a | g | p | s | t）| tp）| hu（aw | tc）| i-（20 | go | ma）| i230 | iac （| - | /）| ibro | idea | ig01 | ikom | im1k | inno | ipaq | iris | ja（t | v）a | jbro | jemu | jigs | kddi | keji | kgt（| /）| klon | kpt | kwc- |京（ c | k）| le（no | xi）| lg（g | /（k | l | u）| 50 | 54 | - [aw]）| libw | lynx | m1-w | m3ga | m50 / | ma（ TE | UI | XO）| MC（01 | 21 | CA）| M-CR |我（RC | RI）|英里（O8 | OA | TS）| MMEF |莫（01 | 02 |双|代|做|吨（ - | | o | v）| zz）| mt（50 | p1 | v）| mwbp | mywa | n10 [0-2] | n20 [2-3] | n30（0 | 2）| n50（0 | 2 | 5 ）| N7（0（0 | 1）| 10）| NE（（C | M） - |在| TF | WF | WG |重量）| NOK（6 | I）| nzph | o2im | OP（TI | WV ）|奥兰| owg1 | P800 |锅（A | d | T）| pdxg | PG（13 | - （[1-8] | C））|菲尔| PIRE | PL（AY | UC）| PN-2 |婆（CK |室温| SE）| PROX | PSIO | PT-G | QA-A | QC（07 | 12 | 21 | 32 | 60 | - [2-7] |异）| QTEK | R380 | R600 | RAKS | rim9 | RO（VE | ZO）| S55 / | SA（GE |毫安|毫米|毫秒| NY | VA）| SC（01 | H- | oo的|对 - ）| SDK / | SE（C（ - | 0 | 1）| 47 | MC | ND | RI）| SGH- |沙皮| SIE（ - | M）| SK-0 | SL（45 | ID）| SM（AL | AR | B3 |它| T5） | so（ft | ny）| sp（01 | h- | v- | v）| sy（01 | mb）| t2（18 | 50）| t6（00 | 10 | 18）| ta（gt | lk） | tcl- | tdg- |电话（I | M）|做为计时| T型钼|至（PL | SH）| TS（70 |间 - |立方米| M5）| TX-9 |向上（.B | G1 | SI）| utst | V400 | V750 | VERI | VI（RG | TE）| VK（40 | 5 [0-3] | -v）| vm40 |沃达| vulc | VX（52 | 53 | 60 | 61 | 70 | 80 | 81 | 83 | 85 | 98）| w3c（ - |）| webc | whit | wi（g | nc | nw）| wmlb | wonu | x700 | yas- | your | zeto | zte- / i。试验（ua.substr（0,4））

Answer 8

另一种选择是在.CSS中使用@media

@media screen and (min-width: 0px) and (max-width: 400px) {
    .navWrap{
        display:none;
    }
}

如果使用移动浏览器隐藏DIV

8 个答案: