html,
body {
    margin: 0;
    /* 移除默认的外边距 */
    padding: 0;
    /* 移除默认的内边距 */
    width: 100%;
    /* 宽度占据整个视口 */
    height: 100%;
    /* 高度占据整个视口 */
    overflow-x: hidden;
    /* 隐藏横向溢出内容，防止横向滚动条出现 */
}

/* Webkit浏览器（Chrome, Safari, Edge等）的滚动条样式 */
::-webkit-scrollbar {
    width: 0;
    /* 设置垂直滚动条的宽度为0，隐藏垂直滚动条 */
    height: 0;
    /* 设置水平滚动条的高度为0，隐藏水平滚动条 */
}

/* iframe包装容器样式 用于包裹iframe并控制其显示区域 */
.iframe-wrapper {
    width: 100vw;
    /* 宽度等于视口宽度 */
    height: 100vh;
    /* 高度等于视口高度 */
    overflow-x: hidden;
    /* 隐藏横向溢出的内容 */
    overflow-y: auto;
    /* 允许垂直方向滚动（如果需要） */
    position: relative;
    /* 设置为相对定位，为内部元素定位提供参考 */
}

/* 主iframe元素的样式 这个iframe用于显示外部内容 */
#main-iframe {
    border: 0;
    /* 移除默认边框 */
    width: 100%;
    /* 宽度填满容器 */
    height: 100%;
    /* 高度填满容器 */
    transform: translateX(0);
    /* 确保没有横向偏移 */
    overflow-x: hidden !important;
    /* 强制隐藏横向滚动条 */
    display: block;
    /* 确保以块级元素渲染，避免下方留有空白 */
}

/* 针对触摸设备的媒体查询 这些样式只在触摸设备（手机、平板）上生效 */
@media (pointer: coarse) {
    #main-iframe {
        touch-action: pan-y;
        /* 只允许垂直方向的手势滚动，防止横向滑动 */
    }
}