僅在移動設備上隱藏div
[英]Hiding div on mobile devices only
問題描述
我有一個按鈕充當“復制網址”按鈕。 這在所有移動設備上都無法正常運行，但是我相信您不能在移動設備上擁有此類功能，因為它們依賴閃存。 在大多數移動網站上，用戶必須手動復制URL。
因此，一旦檢測到移動設備，我想刪除“復制網址”按鈕。
在您燒烤我之前，是的，我讀過：
我嘗試了該線程中提到的解決方案，但是它不起作用。 知道為什么嗎？ 這是我的codepen：
http://codepen.io/rjtkoh/pen/dPxKeg
<head>
<script>
var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
$('.test').css('display', 'none');
</script>
</head>
<div class= "test">yo test me</div>
非常感激。
4 個解決方案
解決方案1
2 已采納 2015-04-15 16:46:02
您似乎沒有使用mobile變量做任何事情。 但是，在采取進一步措施之前，必須解決阻止$('.test').css('display', 'none'); 隱藏div：
您正在引用的DOM元素在執行腳本時不存在。 該腳本應在創建DOM元素后執行，這可以通過以下兩種方法完成：
將
<script>標記移到HTML中的元素之后。 這假定到jQuery的鏈接位於腳本之前，而不是之后。僅在DOM准備就緒后，才使用jQuery的document.ready（）函數執行JavaScript。 由於您已經在使用jQuery，因此這通常是最方便的方法。
例如：
<script>
$(document).ready(function() {
var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
$('.test').css('display', 'none');
});
</script>
解決方案2
0 2015-04-15 16:51:50
您之所以會看到它，是因為DOM尚未完全構建，因此當您嘗試使用$('.test')訪問它時，它將無法獲取它。 您必須等到它完全准備好為止。
將您的Javascript代碼包裝在jQuery提供的ready函數中：
$(document).ready(function () {
// your code goes here
});
僅在所有DOM均已加載后才執行此代碼。 看一下文檔 。
解決方案3
0 2015-04-15 17:01:34
一種簡單的方法是在滿足某些情況時將類添加到html元素中。
並使用選擇器隱藏僅在類存在時要隱藏的元素
這允許您隱藏元素，即使<body></body>尚未被實際加載。
此外，它需要最少的DOM操作。 因此，當需要隱藏太多元素時，它不會滯后於頁面。
只需將代碼放入<head></head>
<script>
if (navigator.userAgent.search("Some thing") >= 0 ) {
/*the html element*/
var root = document.documentElement;
root.setAttribute( "class", "hide-for-compitibility" );
}
</script>
<style>
html.hide-for-compitibility .selectors{
display : none;
}
</style>
解決方案4
0 2015-04-15 17:29:52
有人在看他的codepen嗎？ 嘿，伙計
您在使用它時未包含Jquery。 將其放在您的HTML部分
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>您將腳本放在錯誤的部分，將其移至JS部分。
您獲得的
mobile變量應在IF語句中使用。 例，
if (mobile) $('.test').css('display', 'none'); else $('.test').html('This ELSE leg should be removed');
- 最后，得到其他答案的意見，您應該將代碼包裝在
$(document).ready()函數中。
這是一個示例，它確實起作用。 http://codepen.io/anon/pen/QweBgq
不使用Javascript的另一種方式是使用CSS。 請嘗試以下CSS部分中的代碼。
.test { display: none; } @media (min-width: 768px) { .test{ width: 200px; height: 50px; background: red; display: block; } }
僅在移動設備上顯示div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.