移动端网页适配需求：适配可用视口并禁用滚动

问题现象 #

网站桌面端可动态缩放且无滚动条，表现正常，但在移动端Safari/Chrome中，页面适配了设备全长（包含地址栏下方区域），而非当前可用视口空间，导致出现滚动或内容超出可视区域。

修复步骤 #

1. 修正Viewport标签位置与内容 #

Next.js中meta标签必须放在Head组件内部才能被正确解析，同时替换viewport属性值适配移动端动态视口：

• 移除height=device-height，该属性会强制页面匹配设备物理高度，忽略地址栏等动态元素
• 添加viewport-fit=cover，确保页面覆盖整个视口（适配刘海屏、挖孔屏等特殊屏幕）
• 保留width=device-width, initial-scale=1, user-scalable=no，保证基础适配与禁用缩放

2. 用动态视口高度替代固定vh #

移动端浏览器的100vh会包含地址栏隐藏后的高度，导致页面超出可视区域。改用100dvh（动态视口高度），该单位会实时匹配当前可用的视口空间，不受地址栏显示/隐藏状态影响。

3. 全局禁用滚动 #

给html和body添加overflow: hidden，同时设置touch-action: none，彻底禁用移动端触摸滚动行为。

修改后的代码 #

index.js #

import styles from '../styles/sliderpage.module.css'
import Head from 'next/head'
import './api/mouseListener'
import './api/colorChange'
    
export default function Home() {
  return (
    <div className={styles.slide_wrap}>
      <div className={styles.main}>
        <Head>
          <title>Asterisk Digital Consulting</title>
          <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no" />
          <meta name="description" content="Site under construction." />
          <link rel="icon" href="/favicon.svg" />
        </Head>
        <div id="left-side" className="side">
          <h2 className="title">
            Asterisk Digital <br />will
            <span className="fancy"> brb.</span>
          </h2>
        </div>
        <div id="right-side" className="side">
          <h2 className="title">
            Asterisk Digital <br />will
            <span className="fancy"> brb.</span>
          </h2>
        </div>
      </div>
    </div>
  )
}

globals.css #

@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Rubik&display=swap');
:root {
  --dark: rgb(20, 20, 20);
  --yellow: rgb(253, 216, 53);
  --blue: rgb(98, 0, 234);
  
  --c1: rgb(18, 39, 6);
  --c2: rgb(131, 204, 124);
  
  --left-color: var(--c1);
  --right-color: var(--c2);
}

html, body {  
  background-color: var(--dark);
  margin: 0px;
  overflow: hidden;
  touch-action: none;
}

.side {
  display: grid;
  height: 100dvh;
  overflow: hidden;
  place-items: center;
  position: absolute;
  width: 100%;
}

.side .title {
  font-family: "Rubik", sans-serif;
  font-size: 8vw;
  margin: 0px 10vw;
  width: 80vw;
}

.side .fancy {
  font-family: "Lobster", cursive;
  font-size: 1.3em;
  line-height: 0.8em;
}

#left-side {
  background-color: var(--left-color);
  width: 60%;
  z-index: 2;
}

#left-side .title {  
  color: white;  
}

#left-side .fancy {
  color: var(--right-color);
}

#right-side {
  background-color: var(--right-color);
}

#right-side .title {
  color: var(--dark);
}

#right-side .fancy {
  color: white;
}

额外说明 #

• 100dvh是现代浏览器支持的动态视口单位，若需兼容旧版浏览器，可添加降级方案：height: 100vh; height: 100dvh;
• touch-action: none会禁用所有触摸交互，若页面需要保留部分触摸行为，可改为touch-action: pan-x或其他更精细的取值

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