如何使 JavaScript 函数仅在桌面上工作

Question

I created a JavaScript function that shows an underline under each menu name, but I want this function to work on desktop ONLY.

I tried to use this function, but it did not work for some reason, so I decided to remove it. Please let me know the correct way of doing this. This is the code function I found on 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 time
x.addListener(myFunction) // Attach listener function on state changes

Here is the original code Before I used the code seen above.

 (function() { const target = document.querySelector(".target"); const links = document.querySelectorAll(".mynav a"); const colors = ["deepskyblue", "orange", "firebrick", "gold", "magenta", "black", "darkblue"]; function mouseenterFunc() { if (!this.parentNode.classList.contains("active")) { for (let i = 0; i < links.length; i++) { if (links[i].parentNode.classList.contains("active")) { links[i].parentNode.classList.remove("active"); } links[i].style.opacity = "0.25"; } this.parentNode.classList.add("active"); this.style.opacity = "1"; const width = this.getBoundingClientRect().width; const height = this.getBoundingClientRect().height; const left = this.getBoundingClientRect().left + window.pageXOffset; const top = this.getBoundingClientRect().top + window.pageYOffset; const color = colors[Math.floor(Math.random() * colors.length)]; target.style.width = `${width}px`; target.style.height = `${height}px`; target.style.left = `${left}px`; target.style.top = `${top}px`; target.style.borderColor = color; target.style.transform = "none"; } } for (let i = 0; i < links.length; i++) { links[i].addEventListener("click", (e) => e.preventDefault()); links[i].addEventListener("mouseenter", mouseenterFunc); } function resizeFunc() { const active = document.querySelector(" .mynav li.active"); if (active) { const left = active.getBoundingClientRect().left + window.pageXOffset; const top = active.getBoundingClientRect().top + window.pageYOffset; target.style.left = `${left}px`; target.style.top = `${top}px`; } } window.addEventListener("resize", resizeFunc); // Event Listener To Remove Line From Floating in Air When Leaving Dropdown Box - START document.querySelector(".mynav").addEventListener("mouseleave", function() { target.removeAttribute("style"); }) // Event Listener To Remove Line From Floating in Air When Leaving Dropdown Box - END })(); /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */ function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } }

 @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap'); /* YELLOW - #f7c51e GREY - #363636 background white - #f6f6f6 */ * { box-sizing: border-box; margin: 0; padding: 0; } .color-overlay-container { justify-content: center; align-items: center; position: relative; } .color-overlay { width: 100%; height: 100%; background: #000; opacity: .5; z-index: 2; position: absolute; } .btn-black{ padding: 1.5rem 2rem; color: white; background: black; text-transform: uppercase; font-weight: 900; } .btn-yellow{ padding: 1.5rem 2rem; color: white; background: #f7c51e; text-transform: uppercase; font-weight: 900; } body { font-family: 'Roboto', sans-serif; line-height: 1.4; } a { text-decoration: none; } p { margin: .5rem 0; } /* Utility Classes */ /* Grid Container */ .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1rem; margin: auto; grid-auto-rows: minmax(200px, auto); } .grid-container-2 { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1rem; margin: auto; } .card { background: #fff; padding: 1rem; } /* Grid Container - END */ .container { max-width: 1404px; margin: auto; padding: 0 2rem; overflow: hidden; } .text-center { text-align: center; } .text-yellow { color: #f7c51e; } .bg-yellow { background: #f7c51e; color: black; } .bg-grey { background: #f9f9f9; color: black; } .l-heading { font-weight: bold; font-size: 4rem; margin-bottom: 0.75rem; line-height: 1.1; } .m-heading { font-size: 2rem; margin-bottom: 0.75rem; line-height: 1.1; } .lead { font-size: 1.3rem; margin: 0.75rem 0; } /* Padding */ .py-1 { padding: 1.5rem 0; } .py-2 { padding: 2rem 0; } .py-3 { padding: 3rem 0; } /* All Around Padding */ .p-1 { padding: 1.5rem; } .p-2 { padding: 2rem; } .p-3 { padding: 3rem; } /* Utility Classes - END */ /* ================ HOME PAGE ==================== */ /* HEADER */ .site-header { background-color: transparent; } .site-header .header-container { background: black; color: white; } /* BLACK BAR */ .site-header .header-container .header-container_wrap { padding: 30px 5px; /* background: red; */ } #masthead .header-container .header-container_wrap .items { display: flex; } #masthead .header-container .header-container_wrap .items .contact-info { display: flex; } #masthead .header-container .header-container_wrap .items .quality-logo { margin-right: 3rem; line-height: 5px; } #masthead .header-container .header-container_wrap .items .quality-logo p { font-size: 14px; } #masthead .header-container .header-container_wrap .items .item { display: flex; align-items: center; margin-right: 1rem; } #masthead .header-container .header-container_wrap .items .item { display: flex; align-items: center; margin-right: 1rem; } #masthead .header-container .header-container_wrap .items .item .facebook-like { text-align: center; } #masthead .header-container .header-container_wrap .items .item .fas { font-size: 18px; color: #f7c51e; margin-right: 1.5rem; } #masthead .header-container .header-container_wrap .items .contact-info .item .fas { font-size: 18px; color: #f7c51e; margin-right: 1.5rem; background: black; border-radius: 50%; padding: 10px; border: 1px solid #363636; } /* ========================== Bottom White Header Menu - START ================ */ /* Menu Underline */ .mynav a { display: block; font-size: 20px; color: black; text-decoration: none; padding: 7px 15px; } .target { position: absolute; border-bottom: 4px solid transparent; z-index: 100; transform: translateX(-60px); pointer-events: none; } .mynav a, .target { transition: all .35s ease-in-out; } /* Add a black background color to the top navigation */ .topnav { background-color: white; overflow: hidden; padding: 1rem; } #myTopnav .items { display: flex; justify-content: space-between; align-items: center; } #myTopnav .items .item .mynav ul{ display: flex; align-items: center; } #myTopnav .items .item .mynav ul li{ display: flex; align-items: center; } #myTopnav .items .item .mynav ul li:nth-child(4){ margin-left: .5rem; /* background-color: red; */ } /* Style the links inside the navigation bar */ .topnav a { /* float: left; display: block; */ color: rgb(94,94,94); text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; text-transform: uppercase; font-weight: 600; } /* Add an active class to highlight the current page */ /* .active { color: black; font-weight: 600; color: #363636; } */ /* Hide the link that should open and close the topnav on small screens */ .topnav .icon { display: none; } /* ============================ DROP DOWN MENU =============================== */ /* Dropdown container - needed to position the dropdown content */ .dropdown { /* float: left; */ overflow: hidden; } /* Style the dropdown button to fit inside the topnav */ .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: rgb(94,94,94); padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; text-transform: uppercase; font-weight: 600; display: flex; align-items: center; } /* Style the dropdown content (hidden by default) */ .dropdown-content { display: none; position: absolute; background-color: #f7c51e; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; color: rgb(94,94,94); } /* Style the links inside the dropdown */ .mynav .dropdown-content a { font-size: 14px; font-weight: 500; float: none; color: white; padding: 12px 16px; text-decoration: none; display: block; text-align: left; text-transform: uppercase; } /* Add a dark background on topnav links and the dropdown button on hover */ .topnav a:hover, .dropdown:hover .dropbtn { /* background-color: red; */ color: black; } /* Add a grey background to dropdown links on hover */ .dropdown-content a:hover { /* background-color: red; */ color: black; } /* Show the dropdown menu when the user moves the mouse over the dropdown button */ .dropdown:hover .dropdown-content { display: block; z-index: 101; } /* SEARCH ICONS */ #myTopnav .items .item .fa-search{ font-size: 1.25rem; color: #363636; } /* ========================== Bottom White Header Menu - END ================ */ @media screen and (max-width: 600px) { /* ================== Top Black Bar ============= */ /* ================ WHITE MENU NAVBAR DROPDOWN - START ============ */ .topnav { display: flex; justify-content: center; } .topnav .hamburger { display: flex; align-items: center; } .topnav a, .dropdown .dropbtn { display: none; } .topnav ap { margin-right: 1rem; } .topnav a.icon { display: flex; align-items: center; } .topnav.responsive {position: relative;} .topnav.responsive { display: flex; align-items: center; } /* .topnav.responsive .icon { position: absolute; right: 0; top: 0; } */ .topnav .items .item { display: flex; flex-direction: column; } .topnav.responsive .container .items .item { display: flex; flex-direction: column; } /* AFTER YOU CLICK ON HAMBURGER */ .topnav.responsive .container .items .item a { float: none; display: block; text-align: left; } .topnav.responsive a.icon { display: flex !important; align-items: center; } .topnav.responsive .dropdown {float: none;} .topnav.responsive .dropdown-content {position: relative;} .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; /* text-align: left; */ } /* ================ WHITE MENU NAVBAR DROPDOWN - END ============ */ #masthead .header-container .header-container_wrap .items .quality-logo { margin: auto; margin-bottom: 1rem; } #masthead .header-container .header-container_wrap .items .quality-logo p { font-size: 10px; } #masthead .header-container .header-container_wrap .items .contact-info { display: flex; flex-direction: column; } #masthead .header-container .header-container_wrap { padding: 2rem; } #masthead .header-container .header-container_wrap .items .item { margin-bottom: .5rem; margin-right: 0; } #masthead .header-container .header-container_wrap .items .item .contact-block__value-wrap { margin-bottom: 0rem; } #masthead .header-container .header-container_wrap .items .item .contact-block__value-wrap p { line-height: .75rem; } /* White Menu Bar */ #masthead .header-container .fixed-nav { margin-top: -40px; } /* Facebook */ #masthead .header-container .header-container_wrap .items .item .facebook-like { text-align: center; /* align-self: center; */ margin: auto; } .l-heading { font-weight: bold; font-size: 2rem; margin-bottom: 0.75rem; line-height: 1.1; } .m-heading { font-weight: bold; font-size: 1rem; margin-bottom: 0.75rem; line-height: 1.1; } .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after, .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after { font-size: 2rem; } }

 <!DOCTYPE html> <html lang="en"> <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> <div class="contact-info"> <div class="item"> <i class="fas fa-phone"></i> <div class="contact-block__value-wrap"> <p> Call Today</p> <p><strong>(972)-555-5555</strong></p> </div> </div> <div class="item"> <i class="fas fa-clock"></i> <div class="contact-block__value-wrap"> <p>Mon-Fri:<strong> 7am to 7pm</strong></p> <p>Sat & Sun: 9am-4pm</p> </div> </div> <div class="item"> <i class="fas fa-map-marker-alt"></i> <p>Serving Central Texas</p> </div> <div class="item"> <div class="facebook-like"> <i class="fab fa-facebook-f"></i> <p>LIKE US</p> </div> </div> </div> </div> </div> </div> <!-- ======================== Bottom White header START ======================--> <div class="topnav" id="myTopnav"> <div class="container"> <div class="items"> <div class="item"> <nav class="mynav"> <!-- <a href="#home" class="active">Menu Click Here</a> --> <!-- Hamburger --> <ul> <div class="hamburger"> <!-- <p class="active">Menu Click Here</p> --> <a href="javascript:void(0);" class="icon" onclick="myFunction()"><p>Menu Click Here </p> &#9776;</a> </div> <li><a href="#home">About</a> <!-- DROPDOWN MENU --> <li> <div class="dropdown"> <button class="dropbtn"> <a href="">Services <i class="fa fa-caret-down"></i></a> </button> <div class="dropdown-content"> <a href="#">Brush Mulching & Land Clearing</a> <a href="#">Mapping & Measurement</a> <a href="#">Erosion Mitigation / Driveways / Roads</a> <a href="#">Landscaping & Drainage Management</a> <a href="#">Foundation & Pads</a> <a href="#">General Dirt Work & Tank Pond Trenching</a> <a href="#">Demolition & Clean Up</a> <a href="#">Septic Installation</a> </div> </div> </li> <!-- DROPDOWN MENU END --> <li><a href="#home">Photo Gallery</a></li> <li><a href="#home">Video Example</a></li> <li><a href="#home">Contacts</a></li> <!-- <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a> --> </ul> </nav> </div> <div class="item"> <i class="fas fa-search"></i> </div> </div> </div> </div> <span class="target"></span> <!-- ======================== Bottom White header END ======================--> </nav> </div> <!-- HEADER CONTAINER END -->

Answer 1

You can try with this. Hope it will work.

//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...');
}

Answer 2

JS

The easiest solution I see to your problem is checking if the JS value window.innerWidth is greater or equal to 992px (min desktop width).

CSS

However, since you really want to apply styling which is CSS related you most likely want to write a media query to do your job.

Example:

@media screen and (min-width: 992px) {
    /* CSS-styling for desktop */
}

These are best placed at the bottom of your CSS stylesheet. If you are unfamiliar with them I highly recommend checking them out.

Answer 3

Sorry guys I figured out the answer and it was easy for fix. Instead of adding another javascript function I just used the code below in the CSS Media Query for mobile.

@media screen and (max-width: 600px) {
    /* Removing the Menu Underline For Ipad and Mobile */

    .target {
       display: none;
    }

}