/* =========================================================== 移动端适配加固样式 (mobile-fix.css) 作用：在不破坏桌面布局的前提下，修复手机访问时 最常见的「元素溢出屏幕 / iOS 输入框聚焦缩放 / 表格撑破」 等问题。仅对视口 <=768px 生效，由 full_static_site_build.py 之外的注入脚本统一挂到每个页面 末尾。 =========================================================== */ @media screen and (max-width: 768px) { /* 1. 图片 / 视频 / 嵌入框 不超出屏幕宽度 */ img, video, iframe, embed, object, canvas, svg { max-width: 100% !important; height: auto !important; } /* 2. 容器留边距、不横向溢出 */ .container, .container-fluid, [class*="container-"] { max-width: 100% !important; padding-left: 14px !important; padding-right: 14px !important; } /* 3. 表单控件全宽；字号 >=16px 避免 iOS 聚焦自动放大 */ input, select, textarea, button, .form-control, .btn { max-width: 100% !important; font-size: 16px !important; } /* 4. 表格在手机上可横向滚动，避免撑破布局 */ table { display: block; width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 5. 基础字号 + 禁止横向滚动条 */ html, body { font-size: 15px; overflow-x: hidden !important; } /* 6. 标题在手机上适度缩小，避免挤压换行难看 */ h1, .h1 { font-size: 1.6rem !important; line-height: 1.3 !important; } h2, .h2 { font-size: 1.4rem !important; line-height: 1.3 !important; } h3, .h3 { font-size: 1.2rem !important; line-height: 1.35 !important; } /* 7. 弹窗 / 模态框在手机上不超屏 */ .modal, .modal-dialog { max-width: 96% !important; margin: 12px auto !important; } /* 8. 顶部大图 banner 内文字不溢出 */ .hero, .banner, [class*="banner"] { background-size: cover !important; background-position: center !important; } }