移动端响应式适配问题：背景溢出引发横向滚动故障排查

Hey there! Let's break down why your mobile view (320px-480px) is showing unwanted horizontal scroll, even after adjusting your background image. I’ve gone through your CSS and spotted a few key issues that are causing the overflow:

1. Hardcoded Fixed Widths on Body & Header #

Your body and header elements have a hardcoded width: 1090px in the mobile media query. On screens smaller than 1090px (which all mobile devices in your target range are), this forces the entire page to stretch beyond the viewport—this is the main reason for the horizontal scroll.

Fix: Replace the fixed width with 100% to match the viewport width, and add overflow-x: hidden to the body to catch any accidental overflow from other elements:

body{
  padding:0;
  margin:0 auto;
  width:100%; /* Updated from 1090px */
  height:8227px;
  background-image: url(img/wallbgfadedphone.png);
  background-repeat:repeat;
  background-blend-mode: overlay;
  overflow-x: hidden; /* Add this to block horizontal scroll */
}

header {
  transform: translate3d(0,0,0);
  z-index: 1000;
  padding:0;
  margin:0;
  width:100%; /* Updated from 1090px */
  height:265px;
  position:fixed;
  box-shadow:0 5px 15px 0 #7d7b7c;
}

2. Overwide Splitter Mobile Elements #

All your .splitter*mobile classes (like .splitter1mobile, .splitter2mobile) are set to width: 1090px. These elements will also push the page wider than the mobile viewport, contributing to the scroll.

Fix: Update each splitter mobile class to use width: 100%:

.splitter1mobile {
  visibility: visible;
  height:250px;
  width:100%; /* Updated from 1090px */
  margin:0;
  padding:0;
  z-index:1000;
}

/* Repeat this change for .splitter2mobile, .splitter3mobile, .splitter4mobile */

3. Iframe Exceeds Mobile Viewport Width #

Your Google Maps iframe has width: 500px, which is wider than the maximum 480px screen size in your target range. This will also cause horizontal overflow.

Fix: Set the iframe width to 100% and optionally add a max-width to cap it at the mobile viewport limit:

iframe {
  margin-top:150px;
  margin-right:20px;
  width:100%; /* Updated from 500px */
  max-width:480px; /* Optional: caps width at max mobile screen size */
  height:350px;
}

Quick Additional Check #

Double-check any other elements with hardcoded pixel widths (like .jonnicephone or .jontitelphone with large margins) — these can also push content outside the viewport. Using relative units (percentages, vw) instead of fixed pixels will make your responsive design more robust.

After applying these changes, test your mobile view again. The horizontal scroll should disappear, and your background image should behave as expected without overflowing. Since you’re combining review and hands-on development, remember that fixed pixel widths are a common pitfall in responsive design—sticking to viewport-aligned units will save you a lot of headaches!

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