我創建了一個 JavaScript 函數，在每個菜單名稱下顯示下劃線，但我希望此函數僅在桌面上運行。我嘗試使用這個功能，但由于某種原因它不起作用，所以我決定將其刪除。請讓我知道執行此操作的正確方法。這是我在w3schools上找到的代碼函數。 function myFunction(x) { if (x.matches) { // If media query matches document.body.style.backgroundColor = "yellow"; } else { document.body.style.backgroundColor = "pink"; }}var x = window.matchMedia("(max-width: 700px)")myFunction(x) // Call listener function at run timex.addListener(myFunction) // Attach listener function on state changes這是我使用上面看到的代碼之前的原始代碼。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" integrity="sha384-REHJTs1r2ErKBuJB0fCK99gCYsVjwxHrSU0N7I1zl9vZbggVJXRMsv/sLlOAGb4M" crossorigin="anonymous"> <!-- CSS STYLES --> <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" media="screen and (max-width: 1024px)" href="css/mobile.css"> <!-- Swiper Header Slider --> <!-- <link rel="stylesheet" href="/css/swiper.min.css"> --> <!-- <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css"> --> <title>Document</title></head><body id="home"> <!-- Header Container --> <!-- Navbar-Black --> <div id="masthead" class="site-header"> <nav class="header-container"> <!-- Top Black Header Bar --> <div class="header-container_wrap"> <div class="container"> <div class="items"> <div class="quality-logo"> <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="quality-logo"> <p>Offering Quality work at a fair price to the Central Texas area.</p> </div>
3 回答
慕仙森
TA貢獻1827條經驗 獲得超8個贊
我沒有添加另一個 JavaScript 函數，而是在移動 CSS 媒體查詢中使用了下面的代碼。
@media screen and (max-width: 600px) {
/* Removing the Menu Underline For Ipad and Mobile */
.target {
display: none;
}
}
Helenr
TA貢獻1780條經驗 獲得超4個贊
你可以嘗試用這個。希望它能起作用。
//User agent for Mobile only...
if(navigator.userAgent.match(/Mobile|Windows Phone|Lumia|Android|webOS|iPhone|iPod|Blackberry|PlayBook|BB10|Opera Mini|\bCrMo\/|Opera Mobi/i) ) {
console.log('Mobile Stuff...');
}
//User agent for Tablet only...
if (navigator.userAgent.match(/Tablet|iPad/i)) {
console.log('Tablet Stuff...');
}
//User-agent for Desktop only...
if(!navigator.userAgent.match(/Mobile|Windows Phone|Lumia|Android|webOS|iPhone|iPod|Blackberry|PlayBook|BB10|Opera Mini|\bCrMo\/|Opera Mobi|Tablet|iPad/i) ) {
console.log('Desktop Stuff...');
}
白豬掌柜的
TA貢獻1893條經驗 獲得超10個贊
JS
我看到你的問題最簡單的解決方案是檢查 JS 值是否window.innerWidth大于或等于 992px（最小桌面寬度）。
CSS
然而，由于您確實想要應用與 CSS 相關的樣式，您很可能想要編寫一個媒體查詢來完成您的工作。
例子：
@media screen and (min-width: 992px) {
/* CSS-styling for desktop */
}它們最好放置在 CSS 樣式表的底部。如果您不熟悉它們，我強烈建議您檢查一下。
- 3 回答
- 0 關注
- 136 瀏覽
添加回答
舉報
0/150
提交
取消