/* 移动端H5自适应 - 确保在安卓手机上完全自适应 */
/* 这个文件会被所有前端页面引用，确保在安卓手机上完全自适应 */

/* html和body自适应屏幕宽度 */
html {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: hidden !important;
    position: relative !important;
    -webkit-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

body {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: hidden !important;
    position: relative !important;
    -webkit-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

/* 所有元素使用box-sizing确保不溢出 */
* {
    box-sizing: border-box !important;
}

/* 容器元素使用100%但受父元素限制 */
div, section, article, header, footer, main, aside, nav, form, table, ul, ol, li, p, span, a {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* 媒体元素 */
img, video, iframe, embed, object {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

/* 所有屏幕尺寸都自适应 */
@media screen {
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow-x: hidden !important;
    }
}

/* 大屏幕设备（电脑端）- 强制限制为手机端宽度并居中 */
@media (min-width: 415px) {
    html {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow-x: hidden !important;
        background-color: #f0f0f0 !important;
    }
    
    body {
        width: 100% !important;
        max-width: 414px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow-x: hidden !important;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) !important;
    }
}

/* 超大屏幕设备（电脑端）- 强制限制为手机端宽度并居中 */
@media (min-width: 768px) {
    html {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow-x: hidden !important;
        background-color: #f0f0f0 !important;
    }
    
    body {
        width: 100% !important;
        max-width: 414px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow-x: hidden !important;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) !important;
    }
}