JS设备宽高检测与mobile类切换问题：响应式布局实现出错求助

Hey there! Let's figure out why your "mobile" class toggle isn't working as expected when detecting device dimensions for responsive layouts. Here are the most common issues to check, along with fixes:

1. Your detection logic might be off #

• Wrong property usage: Using window.innerWidth includes the scrollbar width, which can throw off your breakpoint. Instead, use document.documentElement.clientWidth (it excludes scrollbars and gives the viewport's actual usable width).
• Reversed condition: Double-check if you've got your breakpoint logic backwards. For example, if you want to add the "mobile" class when width is under 768px, don't write if (width > 768).

2. You're not listening for resize events (or doing it poorly) #

If you only run the detection once on page load, the class won't update when the user resizes their window. Plus, firing the check on every single resize event can cause performance issues—add a simple debounce:

const MOBILE_BREAKPOINT = 768;

function toggleMobileClass() {
  const isMobile = document.documentElement.clientWidth < MOBILE_BREAKPOINT;
  // Use the second parameter in toggle to auto-add/remove based on the boolean
  document.body.classList.toggle('mobile', isMobile);
  
  // Add a console log to debug what's happening
  console.log(`Current width: ${document.documentElement.clientWidth} | Mobile class: ${isMobile ? 'active' : 'inactive'}`);
}

// Run once on page load
document.addEventListener('DOMContentLoaded', toggleMobileClass);

// Run on resize with debounce to avoid spamming
window.addEventListener('resize', () => {
  clearTimeout(window.resizeTimer);
  window.resizeTimer = setTimeout(toggleMobileClass, 150);
});

3. CSS priority is overriding your "mobile" class styles #

Even if the class is added correctly, your styles might be getting overwritten by more specific selectors. For example:

• If you have .page-content .header in your CSS, a .mobile .header selector won't take precedence unless you make it more specific (like .page-content.mobile .header) or use !important (as a last resort).
• Open your browser's DevTools > Elements tab to check if the "mobile" class styles are crossed out—this means they're being overridden.

4. You're targeting the wrong element #

Double-check that you're adding/removing the class on the right element. If you meant to add it to the <body> but accidentally selected a <div> with a wrong selector (like document.querySelector('.nav')), the class won't affect your layout as expected.

1. Open your browser's DevTools Console and manually run toggleMobileClass()—check if the console log shows the correct width and class status.
2. Go to the Elements tab and inspect the target element to see if the "mobile" class is being added/removed when you resize the window.
3. Check the Styles tab to verify that your "mobile" class styles are being applied (not crossed out).

内容的提问来源于stack exchange，提问作者user9267247