如何使 JavaScript 函数仅在桌面上运行
我创建了一个 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 time
x.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回答
-
慕仙森
我没有添加另一个 JavaScript 函数，而是在移动 CSS 媒体查询中使用了下面的代码。@media screen and (max-width: 600px) { /* Removing the Menu Underline For Ipad and Mobile */ .target { display: none; }} -
Helenr
你可以尝试用这个。希望它能起作用。//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...');} -
白猪掌柜的
JS我看到你的问题最简单的解决方案是检查 JS 值是否window.innerWidth大于或等于 992px（最小桌面宽度）。CSS然而，由于您确实想要应用与 CSS 相关的样式，您很可能想要编写一个媒体查询来完成您的工作。例子：@media screen and (min-width: 992px) { /* CSS-styling for desktop */ }它们最好放置在 CSS 样式表的底部。如果您不熟悉它们，我强烈建议您检查一下。
随时随地看视频慕课网APP
相关分类
Html5