适用于移动设备和桌面设备的不同活动

Question

我希望当用户单击桌面上的登录图标时，它会显示一个模式对话框。但是，在移动设备和平板电脑等较小的设备上，我希望 reactjs 路由启动并显示在我的"主要"内容区域中，而不是使用模式对话框。

我不确定如何干净地做到这一点，首先我想也许有 2 次点击，一次用于触摸，一次用于点击，但在 ipad 上会发生什么，它可能足够大以显示对话框并且应该那样做。

接下来，我想只考虑 2 个单独的图标，并根据我的媒体查询显示正确的图标，尽管我只是不喜欢重复的代码。

还有其他方法吗？我不想开始在我的 java 脚本代码中编写大小逻辑，因为其他所有内容现在都在媒体查询中处理。

Answer 1

您可以使用单个图标。

您可以使用matchMedia(相当于 CSS@media查询的 javascript(来确定浏览器视口是更大还是更小，然后向图标添加一个类来记录这一点。

单击图标时：

• 如果它包含.larger-viewport类，它将调出模态对话框
• 如果它包含.smaller-viewport类，它将触发 ReactJS。

// Initialise Variables
var iconForModal;
var iconForReact;
var loginIcon = document.getElementsByClassName('login-icon')[0];
// Check and record viewport size
function checkViewportSize() {
if (window.matchMedia("(max-width: 800px)").matches) {
loginIcon.className = 'login-icon larger-viewport';
}
else {
loginIcon.className = 'login-icon smaller-viewport';
}
}
window.addEventListener('resize', checkViewportSize, false);
window.addEventListener('load', checkViewportSize, false);
// Activate Login
function activateLogin() {
if (loginIcon.classList.contains('larger-viewport')) {
console.log('Login Modal Activated');
}
if (loginIcon.classList.contains('smaller-viewport')) {
console.log('Login React Activated')
}
}
loginIcon.addEventListener('click', activateLogin, false);

<button type="button" class="login-icon">Login</button>