我已经阅读了很多关于如何检查设备是否可以悬停以做出良好的响应式设计的文章，但仍然没有解决方案。我尝试使用 media(hover:not) 但它仅适用于移动设备上的 Google Chrome。你能帮助我吗？提前谢谢你。
最佳答案
以下演示利用了 MediaQueryList API在 1025px 的断点处控制抽屉插件(只是一个猜测，因为你没有提供任何关于你的 iPad 的信息)。删除、添加和更改内容的详细信息在演示中进行了评论。
基本上在页面加载后，如果屏幕大于 1025px，那么抽屉插件将被移除，侧边菜单将被隐藏。如果它小于 1025 像素，则插件被加载并且侧边菜单可见。如果屏幕大小也发生调整，也会发生这种情况。
对于触摸问题我添加了jQuery UI Touch Punch .您加载了 jQuery UI(尽管我没有注意到它在您的网站上被使用)。 jQuery UI 不识别触摸事件，因此此插件会将触摸事件转换为等效版本的鼠标事件，以便 jQuery UI 对触摸事件使用react。如果您只在桌面上注册鼠标事件而仅在移动设备上注册触摸事件，则不太确定这是否重要。如果您决定不打算使用 jQuery UI，那么使用这个 polyfill Pointer Events jQuery它允许您使用触摸、鼠标等指针类型的事件。
演示
<!DOCTYPE html>
<html lang="bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--|SWAP| positions of <link>s~~~~~~~~~~~~~~|BEGIN|-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
<link rel="stylesheet" href="style.css">
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|END|-->
<!--|ADD| media query here or in style.css|BEGIN|~~~-->
<style>
@media (min-width: 1025px) {
.drawer-toggle.drawer-hamburger { display: none !important }
}
</style>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|END|-->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-touch-punch@0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>
<!--|REMOVE| this <script> tag~~~~~~~~~~~~~~~~|BEGIN|->
<script>$(document).ready(() => $('.drawer').drawer())</script>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|END|-->
<title>Счетоводна къща Елина</title>
</head>
<body class="drawer drawer--left">
<div id="wrapper" role="main">
<!--|ADD| an #id to this <div>~~~~~~~~~~~~|BEGIN|-->
<div id='mobNav' role="banner">
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|END|-->
<button type="button" class="drawer-toggle drawer-hamburger"> <span class="sr-only">toggle navigation</span>
<span class="drawer-hamburger-icon"></span>
</button>
<nav class="drawer-nav" role="navigation">
<ul class="drawer-menu">
<li><a class="drawer-brand" href="#">Начало</a></li>
<li><a class="drawer-brand" href="./services.html">Услуги</a></li>
<li><a class="drawer-menu-item" href="./accounting-services.html">Счетоводни услуги</a></li>
<li><a class="drawer-menu-item" href="./taxing-services.html">Данъчни услуги</a></li>
<li><a class="drawer-menu-item" href="./administration-of-remuneration.html">Администриране на възнаграждения</a></li>
<li><a class="drawer-menu-item" href="./others.html">Други</a></li>
<li><a class="drawer-brand" href="./prices.html">Цени</a></li>
<li><a class="drawer-brand" href="./about-us.html">За нас</a></li>
<li><a class="drawer-brand" href="./contacts.php">Контакти</a></li>
</ul>
</nav>
</div>
<!-- header -->
<header>
<img src="./images/logo.png" alt="Лого">
<nav>
<ul>
<li><a href="#">Начало</a></li>
<li><a href="./services.html">Услуги</a>
<ul class="dropdown">
<li><a href="./accounting-services.html">Счетоводни услуги</a></li>
<li><a href="./taxing-services.html">Данъчни услуги</a></li>
<li><a href="./administration-of-remuneration.html">Администриране на възнаграждения</a></li>
<li><a href="./others.html">Други</a></li>
</ul>
</li>
<li><a href="./prices.html">Цени</a></li>
<li><a href="./about-us.html">За нас</a></li>
<li><a href="./contacts.php">Контакти</a></li>
</ul>
</nav>
<hr>
</header>
<!-- slider -->
<div id="slider">
<img id="left-arrow" src="./images/arrow.png" alt="left-arrow" class="controllers">
<img id="right-arrow" src="./images/arrow.png" alt="right-arrow" class="controllers">
<div id="circle-controllers-section">
<div id="0" class="circle-controllers"></div>
<div id="1" class="circle-controllers"></div>
<div id="2" class="circle-controllers"></div>
</div>
</div>
<script src="./scripts/get-content.js"></script>
<script src="./scripts/slider.js"></script>
<!-- email form -->
<form id="email-form" method="GET">
<div id="email-container">
<h2>Пишете ни</h2>
<label for="myEmail">Имейл:</label>
<input id="myEmail" type="email" name="myEmail" placeholder="Въведете имейл" required>
<label for="myName">Имена:</label>
<input id="myName" type="text" name="myName" placeholder="Въведете име и фамилия" required>
<label for="subject">Предмет:</label>
<select name="subject" required>
<option value="" disabled selected hidden>Изберете предмет</option>
<option value="Счетоводни услуги">Счетоводни услуги</option>
<option value="Данъчни услуги">Данъчни услуги</option>
<option value="Администриране на възнаграждения">Администриране на възнаграждения</option>
<option value="Друго">Друго</option>
</select>
<label for="message">Съобщение:</label>
<textarea id="message" rows="4" cols="40" name="message" placeholder="Въведете съобщение" required></textarea>
<div id="mistake-field"> </div>
<input type="submit" name="button" value="Изпрати"/>
</div>
</form>
<!-- footer -->
<footer>
<hr>
<div id="footer">
<div>
<img id="logo" src="./images/logo.png" alt="Лого">
<a target="_blank" href="https://www.facebook.com/%D0%A1%D1%87%D0%B5%D1%82%D0%BE%D0%B2%D0%BE%D0%B4%D0%BD%D0%B8-%D1%83%D1%81%D0%BB%D1%83%D0%B3%D0%B8-%D0%95%D0%BB%D0%B8%D0%BD%D0%B0-%D0%95%D0%9E%D0%9E%D0%94-368462670244655/?modal=admin_todo_tour">
<img id="facebook" src="./images/facebook-logo.png" alt="Фейсбук">
Посетете и харесайте нашата страница във Фейсбук.</a> </div>
<p>Copyright © 2017 All Rights Reserved</p>
</div>
</footer>
</div>
<!--|ADD| <script> here or on external file |BEGIN|-->
<script>
/* Create a mediaQueryList (mql) with the breakpoint
|| matching your iPad width when in landscape mode
*/
var mql = window.matchMedia('(min-width: 1025px)');
// The callback function passing the Event Object
function modDrawer(e) {
// if change media event matches the mql...
if (e.matches) {
// ...close .drawer...
$('.drawer').drawer('close');
//...remove the plugin...
$('.drawer').drawer('destroy');
//...and hide the menu.
document.querySelector('#mobNav').style.display = 'none';
// Otherwise...
} else {
//...start the plugin...
$('.drawer').drawer();
//...make the menu...
document.querySelector('#mobNav').style.display = 'block';
//...and the button visisble.
document.querySelector('.drawer-toggle.drawer-hamburger').style.cssText = 'block !important';
}
}
/* Register the mql to listen for a media change
|| modDrawer() is the callback
*/
mql.addListener(modDrawer);
</script>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|END|-->
</body>
</html>关于html - 检查设备是否可以悬停，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47241214/