/* ============================================================ * 手机版样式（≤767px） * ------------------------------------------------------------ * 本文件是全站「手机版」设备差异样式的唯一入口， * 由 inc/device_css.php 以 media="screen and (max-width: 767px)" 全站加载。 * 修改约定见 desktop.css 头部说明与 docs/frontend-device-split.md。 * ============================================================ */ /* ---- 全站音乐播放器（灵动岛）：手机端位置 ---- */ #musicPlayer{ --mp-top: 8px; /* 距顶部距离，越大越靠下 */ --mp-right: 8px; /* 距右侧距离，越大越靠左 */ } /* ---- 手机端灵动岛（折叠态）：仅保留专辑封面小圆圈 ---- （隐藏歌名/歌词与全部按钮，去掉胶囊底；封面小圆圈播放时旋转，点击封面 = 展开播放器，见 inc/music.php JS 视口分流） */ #musicPlayer .music-island{ padding:0; gap:0; background:none; border:none; border-radius:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; } #musicPlayer .music-island:hover{ box-shadow:none; } #musicPlayer .mi-txt{ display:none; } #musicPlayer .mi-btn{ display:none; } #musicPlayer .mi-cover{ width:36px; height:36px; flex-basis:36px; font-size:15px; } /* ---- 手机端展开面板：上移对齐，头部封面圆心与折叠态封面圆心重合 ---- 折叠态封面 36px 位于 (8,8) → 圆心 (26,26)；面板内边距 14、展开封面 52 → top/right = 26-(8+14+26) = -22 ★ 改「手机版」展开面板大小：改下面 width 的 280px；面板高度由内容决定（歌词区高度改下面 #musicPlayer .mp-lyrics 的 72px） */ #musicPlayer .music-panel{ width:280px; top:-22px; right:-22px; } #musicPlayer .mp-lyrics{ height:72px; } /* ---- 手机端播放列表悬浮窗：底部抽屉 ---- */ #musicPlayer .mp-list-mask{ align-items:flex-end; padding:0; } #musicPlayer .mp-list-pop{ width:100%; max-height:70vh; border-radius:20px 20px 0 0; animation-name:mpListPopUp; } @keyframes mpListPopUp{ from{ opacity:0; transform:translateY(60px); } to{ opacity:1; transform:translateY(0); } } /* ============================================================ * 手机版：安全区 / 输入缩放 / 长内容 / 小屏与矮屏适配 * ------------------------------------------------------------ * 页面类名一律为下划线式，如 page-food_detail。 * 与 nav.php 内联样式冲突处一律靠提高特异性解决，不使用 !important。 * ============================================================ */ /* ---- 1) 底部导航安全区 ---- nav.php 内联给 body 设了 padding-bottom:70px，但导航自身还有 env(safe-area-inset-bottom)（刘海屏手势条约 34px），二者相加会盖住最后一行内容。这里用 html body 提高一级特异性覆盖它。 */ html body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); } /* 首页另带 Tailwind 的 pb-20（5rem），需再高一级特异性才压得住 */ html body.page-index { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); } /* ---- 2) iOS 聚焦自动放大 ---- 字号小于 16px 的输入控件在 iPhone 上聚焦会把整页放大并错位 */ input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="date"], textarea, select { font-size: 16px; } /* ---- 3) 长内容不撑破布局（长链接、连续英文、无空格串） ---- */ body .post-content, body .detail-content, body .comment-item, body .listing-body, body .msg-content, body .prose { overflow-wrap: anywhere; } body img, body video, body canvas, body iframe, body svg { max-width: 100%; } /* ---- 4) 触摸目标不小于 48px ---- */ html body .nav-item { min-height: 48px; } html body .nav-sheet-item { min-height: 48px; } /* ---- 5) 小屏（≤380px）：收紧内边距，标题降一档 ---- */ @media (max-width: 380px) { body .container { padding-left: 12px; padding-right: 12px; } body .hero h1 { font-size: 1.6rem; } body .media-grid { gap: 6px; } } /* ---- 6) 矮屏：登录页等 100vh 布局改用动态视口高度，避免地址栏收放时跳动 ---- */ @supports (height: 100dvh) { body.page-login main { min-height: calc(100dvh - 5rem); } } /* ---- 7) 横屏矮屏：「更多」弹层可滚动，不超出视口 ---- */ @media (max-height: 520px) { .nav-sheet { max-height: 88vh; overflow-y: auto; } } /* ---- 8) 防止 iOS 横屏时文字被自动放大 ---- */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* ============================================================ * 校草/校花评比：手机版（≤767px） * ------------------------------------------------------------ * 页面类名：page-contest / page-contest_entry。 * 公共基础样式在 inc/contest_style.php，电脑版差异在 desktop.css。 * ============================================================ */ /* ---- 1) 头部上下堆叠，「我要投稿」独占一行便于点按 ---- */ body.page-contest .ct-head { flex-direction: column; align-items: stretch; gap: 10px; } body.page-contest .ct-head-actions { align-self: stretch; } body.page-contest .ct-submit-btn { display: block; text-align: center; padding: 11px 16px; } /* ---- 2) 阶段条收紧，三格在窄屏不换行 ---- */ body.page-contest .ct-phasebar { padding: 10px 8px; } body.page-contest .ct-phase-k { font-size: 0.66rem; } body.page-contest .ct-phase-v { font-size: 0.86rem; } body.page-contest .ct-phase-small { font-size: 0.66rem; } /* ---- 3) 候选人保持 2 列，卡片更紧凑 ---- */ body.page-contest .ct-grid { gap: 9px; } body.page-contest .ct-body { padding: 8px 8px 9px; } body.page-contest .ct-name { font-size: 0.84rem; } body.page-contest .ct-bio { font-size: 0.7rem; height: 54px; } /* 固定高度 + 滚动，卡片长度一致 */ body.page-contest .ct-vote-btn { padding: 7px 12px; font-size: 0.74rem; min-height: 32px; } body.page-contest .ct-count { margin-left: 0; flex-basis: 100%; } /* ---- 4) 投稿表单：窄屏改单列，触摸目标 ≥44px ---- */ body.page-contest_entry .ct-row2 { grid-template-columns: 1fr; } body.page-contest_entry .ct-field input[type="text"], body.page-contest_entry .ct-field select { min-height: 44px; } body.page-contest_entry .ct-radio { flex: 1 1 0; justify-content: center; min-height: 44px; } body.page-contest_entry .ct-terms-box { max-height: 260px; } /* ---- 5) iOS 聚焦缩放：页面级样式特异性高于全站 input 规则，需显式回到 16px ---- */ body.page-contest_entry .ct-field input[type="text"], body.page-contest_entry .ct-field textarea, body.page-contest_entry .ct-field select, body.page-discipline .ct-reject-reason { font-size: 16px; } /* ---- 6) 审核片段：按钮不挤压信息区 ---- */ body.page-discipline .ct-review-photo img { max-width: 100px; max-height: 130px; }