HTML页面移动端适配求助：图片、嵌入日历与表单在平板/移动端显示异常

嘿，我瞅了下你的代码，桌面端正常但移动端日历显示不全的问题，主要是响应式布局没做适配和固定宽高的元素没自适应导致的。咱们一步步来修复：

核心问题分析 #

1. 你用了flex布局放图片和日历，但没在小屏幕下切换成垂直排列，导致横向空间不够时，日历直接被挤出视口
2. 嵌入的日历iframe用了固定width='300'，在窄屏上会超出容器，而且scrolling='no'会让溢出的内容直接隐藏，没法滚动查看
3. 图片没加自适应限制，在小屏幕上可能撑破容器
4. 表单里有重复的id="date"，属于DOM ID冲突，会影响页面逻辑

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>SMLDM Hosting #DiscoverDesertRiches</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="assets/css/main.css" />
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/favicon.ico">
    <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
    <style>
        /* 主容器布局 */
        .container {
            display: flex;
            align-items: flex-start;
            gap: 20px;
            margin-bottom: 30px;
            padding: 0 15px;
        }
        /* 图片自适应 */
        .image-column img {
            max-width: 100%;
            height: auto;
            border-radius: 4px;
        }
        /* 日历列自适应 */
        .text-column {
            flex: 1;
            min-width: 0; /* 解决flex子元素溢出的关键属性 */
        }
        /* 日历iframe适配 */
        .text-column iframe {
            width: 100% !important;
            max-width: 300px;
            height: 360px;
            border: none;
            scrolling: auto; /* 允许内容溢出时滚动查看 */
        }
        /* 表单适配 */
        .inquiry-form {
            padding: 0 15px;
            max-width: 600px;
            margin: 0 auto;
        }
        .inquiry-form div {
            margin-bottom: 18px;
        }
        .inquiry-form label {
            display: block;
            margin-bottom: 6px;
            font-weight: 500;
        }
        .inquiry-form input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .inquiry-form button {
            background: #00d63d;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        /* 小屏幕响应式切换 */
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }
            .text-column iframe {
                max-width: 100%;
            }
        }
        /* 保留你原来的加载动画样式 */
        :root{--scolor: #00d63d;}
        .grupzring{
            display: inline-block; 
            width: 200px; 
            height: 200px; 
            position: absolute; 
            margin: auto; 
            top: 0; right: 0; bottom: 0; left: 0;
        }
        .grupzring div{
            box-sizing: border-box; 
            display: block; 
            width: 200px; 
            height: 200px; 
            position: absolute; 
            margin: auto; 
            top: 0; right: 0; bottom: 0; left: 0; 
            margin: 0px; 
            border: 6px solid var(--scolor); 
            border-radius: 50%; 
            animation: grupzring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; 
            border-color: var(--scolor) transparent transparent transparent;
        }
        .grupzring div:nth-child(1){animation-delay: -0.45s;}
        .grupzring div:nth-child(2){animation-delay: -0.3s;}
        .grupzring div:nth-child(3){animation-delay: -0.15s;}
        @keyframes grupzring{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}
    </style>
</head>
<body>
    <div class="container">
        <div class="image-column">
            <img src="images/fulls/07.jpg" alt="Rentals">
        </div>
        <div class="text-column">
            <div id="gcalspin2" class="grupzring">
                <div></div><div></div><div></div><div></div>
            </div>
            <iframe src="https://grupz.com/avail-calendar-medium-18/1751816895929x855613229495222300?legend=no" 
                    onload="document.getElementById('gcalspin2').style.display='none';">
            </iframe>
        </div>
    </div>

    <div class="inquiry-form">
        <h1>Rental Date Inquiry</h1>
        <form action="https://formspree.io/f/manbneqk" method="post">
            <div>
                <label for="firstname">First Name</label>
                <input type="text" name="firstname" id="firstname" placeholder="Your first name" />
            </div>
            <div>
                <label for="lastname">Last Name</label>
                <input type="text" name="lastname" id="lastname" placeholder="Your last name" />
            </div>
            <div>
                <label for="email">Email</label>
                <input type="email" name="email" id="email" placeholder="example@email.com" />
            </div>
            <div>
                <label for="date1">Select first choice</label>
                <input type="date" style="color: black;" id="date1" name="Date1" required />
            </div>
            <div>
                <label for="date2">Select second choice</label>
                <input type="date" style="color: black;" id="date2" name="Date2" required />
            </div>
            <button type="submit">Submit</button>
        </form>
    </div>

    <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</body>
</html>

关键修复点说明 #

1. Flex布局响应式切换：通过@media (max-width:768px)在小屏幕下把flex-direction改成column，让图片和日历垂直排列，避免横向溢出
2. 自适应元素调整：
   • 图片加了max-width:100%和height:auto，确保在小屏幕上不会撑破容器
   • 日历iframe改成width:100%+max-width:300px，小屏幕自适应宽度，大屏幕保持原尺寸
3. 表单优化：给表单加了居中样式和内边距，输入框设width:100%，保证在所有屏幕上都能正常填写
4. DOM冲突修复：把重复的id="date"改成date1和date2，避免页面逻辑错误

替换成上面的代码后，你可以在手机/平板模拟器里测试，应该就能解决日历显示不全的问题啦～

内容来源于stack exchange