网页超出设备/窗口范围时无法向左滚动的问题求助

问题描述 #

网页部署后大屏显示正常，但在尺寸小于网页的设备或窗口中，无法向左滚动，仅能向右滚动至图片右端。尝试过给div设置overflow: auto;和margin: 0 auto;，无效果。

提供的代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7"> 
    <title>In the memory of vroomeee</title>
    <link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
    <div id="container">
        <h1>Vroomeee pictures</h1>
        <img src="1.JPG" alt="a picture of vroomeee">
        <br>
        <button>get next photo</button>
        <p>부름이 보고 싶다ㅎㅎ</p>
    </div>
    <script type="text/javascript" src="app.js"></script>
</body>
</html>

CSS代码 #

h1{
color: purple;
font-weight: 1;
text-transform: uppercase;
border-top: 5px solid;
font-size: 75px;
margin: 40px;
letter-spacing: 2px;
}

body {
    background-color: salmon;
    color: purple;
    font-family:sans-serif;
    font-weight: bold;
}

img {
    height: 500px;
    border-radius: 0%;
}

button {
    margin: 30px auto 0;
    padding: 20px 25px;
    background-color: salmon;
    font-size: 20px;
    text-align: center;
    border:1px solid #2E1263;
    text-transform: uppercase;
    text-decoration: none;
    outline: none;
    letter-spacing: 4px;
    color: purple;
}

button:hover {
    text-decoration: underline;
    transition: 0.4s;
    background-color: purple;
    color: salmon;
}

#container{
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    height:100vh;
}

问题原因 #

1. viewport缩放限制：meta标签中initial-scale=0.7, maximum-scale=0.7强制页面固定缩放比例，当页面内容超出设备可视区域时，无法通过缩放调整，左侧溢出内容被锁定在可视区域外，无法滚动查看。
2. 图片无响应式处理：图片仅设置固定高度height: 500px，未限制宽度，小屏设备中图片原始宽度超过可视区域，直接撑大容器导致横向溢出。
3. flex容器布局特性：#container使用align-items:center，内容溢出时容器不会自动收缩，左侧溢出部分被隐藏，叠加viewport的缩放限制，进一步阻止了向左滚动。

解决方法 #

1. 修复viewport配置 #

替换为标准响应式viewport设置，移除固定缩放限制：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 给图片添加响应式样式 #

确保图片自适应容器宽度，避免溢出：

img {
    height: 500px;
    max-width: 100%;
    object-fit: contain; /* 保持图片比例，防止拉伸变形 */
    border-radius: 0%;
}

若不需要固定高度，可改为：

img {
    height: auto;
    max-width: 100%;
    border-radius: 0%;
}

3. 允许页面横向滚动 #

给body添加横向溢出处理，确保溢出内容可滚动：

body {
    background-color: salmon;
    color: purple;
    font-family:sans-serif;
    font-weight: bold;
    overflow-x: auto;
}

4. 优化标题的响应式适配 #

使用相对单位让标题在小屏自动缩小，避免溢出：

h1 {
    color: purple;
    font-weight: 1;
    text-transform: uppercase;
    border-top: 5px solid;
    font-size: clamp(2rem, 10vw, 75px); /* 字体大小随视窗宽度自适应，范围2rem到75px */
    margin: 40px;
    letter-spacing: 2px;
}

内容的提问来源于stack exchange，提问作者노상우