我创建了一个 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条经验 获得超7个赞
我没有添加另一个 JavaScript 函数，而是在移动 CSS 媒体查询中使用了下面的代码。
@media screen and (max-width: 600px) {
/* Removing the Menu Underline For Ipad and Mobile */
.target {
display: none;
}
}
Helenr
TA贡献1780条经验 获得超3个赞
你可以尝试用这个。希望它能起作用。
//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 关注
- 65 浏览
添加回答
举报
0/150
提交
取消