媒體查詢不適用於大型移動設備（平板電腦）

我有一些媒體查詢不能正常工作，基本上下面的CSS應該顯示桌面上的一些元素和手機上的一些元素。媒體查詢不適用於大型移動設備（平板電腦）

例如，在手機/平板電腦上隱藏一些「懸浮」元素，但在桌面設備上顯示它們。

@media (max-width: 1024px){ 
    .desktop_only { 
     display: none !important; 
    } 
} 
@media (min-width: 1025px){ 
    .mobile_only { 
     display: none !important; 
    } 
}

在CSS4誠然，我們將能夠做到這一點很容易使用「指針」功能：https://drafts.csswg.org/mediaqueries/#pointer但我不能使用，因爲這是未來的，尚未實現。

我試着使用：

<script> 
    document.documentElement.className += 
    (("ontouchstart" in document.documentElement) ? ' touch' : ' no-touch'); 
</script>

我已經使用過近代化，這是應該還添加觸摸試圖/不觸摸

有了：

@media (max-width: 1024px){ 
    .touch .desktop_only { 
     display: none !important; 
    } 
} 
@media (min-width: 1025px){ 
    .no-touch .mobile_only { 
     display: none !important; 
    } 
}

但不起作用，它沒有正確隱藏元素。我也嘗試過沒有@media (xxxx: 102x)的一部分，但那也行不通。我也試過切換觸摸和不觸摸，以防萬一我弄錯了他們。

我不能使用CSS：-moz-system-metric(touch-enabled)因爲它不是由許多瀏覽器

不確定我該如何使用http://detectmobilebrowsers.com/做我想做

任何人有什麼，我做錯了什麼端倪什麼支持？

來源

2016-04-20 Ryflex

嘗試'在@'處有@media僅屏幕和（最大寬度：1025px）'以及包含'' –

您是否嘗試過驗證CSS？失蹤的小兵在以前的元素的某處可能會弄亂它下面的任何代碼。 – BrainHappy

@布萊恩css是全部有效的，我已經嘗試過跨頁面的多個區域的CSS，它仍然不工作。 – Ryflex

basiclly你的媒體是錯誤的，見最小寬度和最大寬度，這樣做

.mobile-only { 
    display: block; 
} 

@media (min-width: 1024px){ 
    .desktop-only { 
    display: block; 
    } 
    .mobile-only { 
    display: none; 
    } 
    .desktop-only:hover { 
    color:#000; 
    } 
}

不使用下劃線

編輯 - 這裏是我的

/* =============== 
DISPLAY SETTINGS 
=============== */ 

@media all and (max-width: 43.688em) { /* 489px */ 

    .mobile-is-hidden { display: none; } 

} 

@media all and (min-width: 43.688em) and (max-width: 61.188em) { /* 699px to 979px */ 

    .pad-is-hidden { display: none; } 

} 

@media all and (min-width: 61.250em) { /* 980px */ 

    .desk-is-hidden { display: none; } 

}

來源

2016-04-21 01:49:21

嗨，那仍然不起作用。例如，它不會將其應用於Nexus 10格局。 – Ryflex

@Ryflex這僅僅是一個例子，你必須找出實際的屏幕尺寸，即使手機有視網膜也能播放它。例如手機隱藏僅適用於寬度爲489px的屏幕尺寸，如果您希望將其隱藏在橫向上，則這會導致平板電腦出現問題，因爲它們很多時候會使用相同的寬度。（大多數人不會在手機上使用橫向網站，因爲這很煩人） –

媒體查詢不適用於大型移動設備（平板電腦）

回答

相關問題