/*fp-seed:syd794640bzw v4.86 2yoirf*/ /* ========================================================================== _seo_mobile.css v2 - 企业站完整移动端 CSS auto-generated by SEO-克隆建站系统/克隆引擎/内容/移动端适配器.py 生效条件: 屏幕 ≤768px (平板 + 手机), PC 端 (>768px) 完全失效 ========================================================================== */ /* ===== 0. 关键性能优化 (全屏生效, 不限媒体查询) ===== */ img[loading] { background: #f5f5f5} img.lazyload { opacity: 0; transition: opacity .35s} img.lazyloaded { opacity: 1} /* v17.48(2026-06-01) 默认隐藏移动端 tabbar (PC 端不该看到这玩意). 下面 @media (max-width: 768px) 里再设 display:flex 把手机端打开. bug 历史: 之前没这条全局隐藏, PC 浏览器对
按默认 display:block 渲染, 用户看到一行裸 emoji "🏠首页📦产品💬联系🏢关于⬇底部" */ .seo-mobile-tabbar { display: none !important} /* ============================================================ ★ 主响应式块: 屏幕 ≤768px ============================================================ */ @media screen and (max-width: 768px) { /* ---- 1. 全局 reset ---- */ html, body { min-width: 0 !important; max-width: 100% !important; overflow-x: hidden !important; -webkit-text-size-adjust: 100% !important; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0,0,0,0.08); scroll-behavior: smooth} body { font-size: 16px !important; line-height: 1.6 !important; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif !important; color: #333 !important; background: #fff !important; /* 给底部 tabbar 让出 60px 空间 */ padding-bottom: 60px !important} /* ---- 2. 容器 (全名单) ---- */ .container, .wrap, .wrapper, .main, .content, .page, .pagebody, .layout, .l-wrap, .layout-main, .site-wrap, .site-content, .body-wrap, .body-content, .main-wrap, .main-content, #container, #wrap, #wrapper, #main, #content, #page, #pagebody { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 12px !important; padding-right: 12px !important; box-sizing: border-box !important; float: none !important} /* ---- 2.5 固定像素宽度容器 (OKA-158) ---- 上面是类名白名单, 灰产 CMS 常用的 .w1200 / .w1000 / .w960 这种 "宽度写进类名" 的容器不在名单里, 于是 width:1200px 原样渲染, 撑破 375px 视口 —— html,body 的 overflow-x:hidden 只是把溢出裁掉 不显示滚动条, 内部元素照样按 PC 宽度排, 视觉上就是右边被切. 病例 tiemajiaoguan (run #174):
实测 right=1212, 它的子元素 .f2/.f2_3/img.cfr 跟着一起被推出视口. 只 reset 宽度, 不加 padding —— 这类容器可能嵌在已有 padding 的 外层里, 再加会双重缩进. */ [class*="w960"], [class*="w1000"], [class*="w1100"], [class*="w1152"], [class*="w1180"], [class*="w1200"], [class*="w1220"], [class*="w1230"], [class*="w1240"], [class*="w1280"], [class*="w1300"], [class*="w1400"], [class*="width1000"], [class*="width1200"], [class*="wrap1200"] { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important} /* ---- 3. 排版 ---- */ /* v85(2026-07-27 OKA-210) h1 加 :not([style]) —— 放行 TDK处理._注入h1关键词 写死 inline style 的 X 词 h1 (32px/700/left, 对齐樱梦真站; 樱梦移动端同样 不缩字号, 实测 375px 下仍是 32px)。这里的 !important 本意是压平源站各种 奇怪标题字号, 但它连 inline style 一起盖掉了, 把 X 词 h1 压成 22/20px。 源站原有的 h1 在 _注入h1关键词 里已被无条件降级成 h2, 由下面那条 h2 规则 接管, 所以放行裸 h1 不会让源站标题失去移动端规范化。 */ h1:not([style]), .h1 { font-size: 22px !important; line-height: 1.4 !important; margin: 14px 0 10px !important; font-weight: 600 !important} h2, .h2 { font-size: 19px !important; line-height: 1.4 !important; margin: 12px 0 8px !important; font-weight: 600 !important} h3, .h3 { font-size: 17px !important; line-height: 1.4 !important; margin: 10px 0 6px !important; font-weight: 600 !important} h4, h5, h6, .h4, .h5, .h6 { font-size: 16px !important; line-height: 1.4 !important} p { font-size: 15px !important; line-height: 1.7 !important; word-wrap: break-word !important; margin: 0 0 10px !important} ul, ol { padding-left: 20px !important; margin: 0 0 10px !important} li { line-height: 1.6 !important} blockquote { padding: 10px 14px !important; border-left: 3px solid #1e88e5 !important; background: #f5f9ff !important; margin: 10px 0 !important} /* ---- 4. 图片自适应 ---- */ img, picture, .img-fluid, .img-responsive { max-width: 100% !important; height: auto !important; display: inline-block} figure { margin: 10px 0 !important; max-width: 100% !important} /* ---- 5. 表格 (横向滚动) ---- */ .table-wrap, .table-responsive { width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; margin: 10px 0 !important} table { display: block !important; width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; border-collapse: collapse !important; white-space: nowrap !important} td, th { padding: 8px 10px !important; font-size: 14px !important; border: 1px solid #eee !important} th { background: #f5f5f5 !important; font-weight: 600 !important} /* ---- 5b. 源站用 当图片卡片的 (float + 定宽) (v32.22 · OKA-300) ---- * 病例 qdrx999.com (源站 cntysw.com · 证书/产品列表): *
* * *
实用新型专利
* 每张证书 = 一个 float:left + width=280 的独立小 table (源站拿 table 当卡片)。 * 移动端 td 是 display:table-cell, `seo-w-full` 的 width:100% 对它无效 (被 * table 列宽算法卡在 280) → 图只占视口 65%、两边留白, 用户报"图片小结构不对"。 * * ⚠️ 跟 §5 数据表格的分界 (关键, 否则误伤 24 个真数据表格站, ntfjdt 有 94 个): * **float + 定宽 = 卡片 table** (数据表格不会 float 也不定死 width 当卡片摆)。 * §5 那条 (无 float 的 table) 保持横向滚动不动; 这条只管 float+定宽的。 * 实测 8 站命中 (全 cntysw.com 同源站, 每站 10 个, 全含 img), 24 个数据表格 * 站零命中。 * * 处理: float:none + width:100% (拉满视口) · td 转 block 居中 · img width:100%。 * ⚠️ 必须 float:none —— 不清的话多个卡片 table 仍会浮动并排挤成小块。 */ html.seo-nav-fullwidth table[width][style*="float"], table[align][width][style*="float"] { float: none !important; width: 100% !important; max-width: 100% !important; margin: 8px 0 !important; display: block !important; white-space: normal !important; overflow-x: visible !important} html.seo-nav-fullwidth table[width][style*="float"] td, table[align][width][style*="float"] td { display: block !important; width: 100% !important; text-align: center !important; white-space: normal !important} html.seo-nav-fullwidth table[width][style*="float"] img, table[align][width][style*="float"] img { width: 100% !important; height: auto !important; max-width: 100% !important} /* ---- 6. 表单 (iOS 字号 ≥16px 防放大) ---- */ input, textarea, select { font-size: 16px !important; max-width: 100% !important; box-sizing: border-box !important; border-radius: 6px !important; border: 1px solid #ddd !important; background: #fff !important; color: #333 !important; -webkit-appearance: none !important} input[type="text"], input[type="tel"], input[type="email"], input[type="search"], input[type="password"], input[type="number"], input[type="url"], input[type="date"], input[type="time"], textarea { width: 100% !important; padding: 12px 14px !important; margin: 6px 0 !important} textarea { min-height: 100px !important; resize: vertical !important} select { padding: 12px 14px !important; background: #fff url("data:image/svg+xml;utf8,") no-repeat right 12px center !important; padding-right: 32px !important} label { display: block !important; margin: 6px 0 4px !important; font-size: 14px !important; color: #555 !important} .form, form { width: 100% !important} /* ---- 7. 按钮 (Apple HIG 44x44px) ---- */ button, .btn, .button, input[type="button"], input[type="submit"], input[type="reset"] { min-height: 44px !important; min-width: 44px !important; font-size: 16px !important; padding: 12px 20px !important; border-radius: 6px !important; border: none !important; cursor: pointer; font-weight: 500 !important; line-height: 1.2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: all .2s ease} .btn-primary, .btn.primary, button.primary, input[type="submit"], .btn-blue { background: linear-gradient(135deg, #1e88e5, #1565c0) !important; color: #fff !important} .btn-success, .btn-green { background: linear-gradient(135deg, #43a047, #2e7d32) !important; color: #fff !important} .btn-danger, .btn-red { background: linear-gradient(135deg, #e53935, #c62828) !important; color: #fff !important} .btn-block, .btn.block { width: 100% !important} /* ---- 8. 顶部导航 · v32(2026-07-29 OKA-252) 2 列网格常显 · 撤掉汉堡折叠 ---- * 用户原话: "移动端可以不用右那个隐藏吗? 只需要把字体导航变小, 适配移动端 ... * 类似这个樱梦的站, 导航会自动换行, 适配移动端, UI 也会比较漂亮, * 不需要右上那个汉堡折起来" * * 形态取自樱梦 52291.cn 蜘蛛版实测 (源站 dedecms 模板自带的 .hy-nav-menu * 响应式, 不是它的克隆系统加的): * li a { padding:12px 5px; font-size:15px; border-radius:8px; * min-height:44px; white-space:normal; word-break:break-word; * background:rgba(102,126,234,.05); text-align:center; * display:flex; align-items:center; justify-content:center } * 我方沿用同一套量, 主题色换成本项目的 #1e88e5 系。 * * ⚠️ 这里撤掉的是 v30.5/v31 的"默认收起 + 汉堡展开"策略 (见下方 v30.5 段 * 和 _生成JS.py)。那两版修的是 guangdongzuyi.com 的"nav 7 项竖排撑爆首屏 * 676px"和"展开后全屏白底挡内容"—— 而竖排本身就是 v2 那条 * `nav li {display:block; width:100%}` 造成的。网格化之后 7 项只占 4 行 * 约 200px, 两个病因都不存在了, 所以是**换解法**不是退回老 bug。 * 别再改回 `display:block; width:100%` + 汉堡, 会重演本次用户投诉。 */ /* 8.0 导航容器 full-bleed —— 突破源站 PC 栅格的窄栏限制 * 这类源站**根本没有移动端布局**: PC 两栏结构 (logo 左 / 导航右) 直接塞进 * 375px, 导航天生躺在 114-164px 的右侧栏里。网格再怎么调也排不开, 而且整块 * 偏在屏幕右侧被裁 (sxxwpnc.com / ynrgjz.com 截图实测)。 * 原来的"汉堡折叠"其实正是**规避**这一点的手段 —— 把导航拎出文档流做成 * 全宽抽屉, 就绕开了"它在窄栏里"的事实。撤掉汉堡就必须正面解决它。 * * `margin-left: calc(-50vw + 50%)` 是标准的 full-bleed 技巧: 元素先左移到 * 视口左边缘, 再配 `width:100vw` 占满整个视口宽 —— **只改导航自己, 一个 * 祖先都不碰**。试过改祖先 (4 版), 每版都破坏源站层叠 (导航被 banner 盖 / * logo 消失), 见 tests/test_seo_cloner_导航网格.py:test_E_不许用JS改源站布局。 * ⚠️ 要跟 `position:relative` 一起用 (不能是 static), 否则某些源站的 * absolute 子元素会跑位。 */ /* ⚠️ full-bleed 只在 `html.seo-nav-fullwidth` 下启用 —— 那个 class 由 * _seo_mobile.js 的 `搬导航到独立行()` **搬成功后**才加。 * 原因: 全宽的前提是导航已经独占一行。若源站没有
可作落点 * (病例 ynrgjz.com), 导航搬不走、仍跟 logo 同行, 这时给它 100vw 会直接 * 盖在 logo 和 banner 上 —— 比不改更糟。那类站只做网格化 (§ 8.2-8.5), * 导航留在原窄栏里排 1 列, 不溢出也不重叠。 */ html.seo-nav-fullwidth nav, html.seo-nav-fullwidth .nav, html.seo-nav-fullwidth .navbar, html.seo-nav-fullwidth .navigation, html.seo-nav-fullwidth .header-nav, html.seo-nav-fullwidth .top-nav, html.seo-nav-fullwidth #nav, html.seo-nav-fullwidth #navbar, html.seo-nav-fullwidth .menu, html.seo-nav-fullwidth .main-menu, html.seo-nav-fullwidth .h-nav, html.seo-nav-fullwidth .header-menu { width: 100vw !important; max-width: 100vw !important; min-width: 0 !important; margin-left: calc(-50vw + 50%) !important; margin-right: 0 !important; box-sizing: border-box !important; padding-left: 10px !important; padding-right: 10px !important; float: none !important; display: block !important; text-align: left !important; position: relative !important; left: auto !important; right: auto !important; /* ⚠️ height:auto + overflow:visible 不能省 —— 源站给导航容器写死过高度 * (PC 单行导航 ~50px), 网格化后内容变成 4 行 208px, 容器却还是 101px, * ul 溢出 107px 正好盖在 logo 上 (病例 ynrgjz.com: 看着像"logo 压导航", * 实际是"导航溢出容器压到 logo")。 */ height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; line-height: normal !important} /* 8.0b 搬不动的站 = 改造前 v2 的原样行为 (一个字都不多改) * ──────────────────────────────────────────────────────── * 网格化 / 全宽 / 藏汉堡 全部挂在 `html.seo-nav-fullwidth` 下, 只给导航 * 真被搬成独立一行的站。搬不动的站 (源站没
可作落点, 病例 * ynrgjz.com) 这里必须**完整保留改造前那套**, 否则会退化: * · 少了这套 → 既没网格也没汉堡, 导航彻底不可用 (实测项数 0) * · 多改一点 (加 position/display/box-sizing) → 动到源站布局, * banner 反过来盖住导航 (实测截图) * 所以这一段是**逐字照抄 v2**, 不许"顺手优化"。 */ nav, .nav, .navbar, .navigation, .header-nav, .top-nav, #nav, #navbar, .menu, .main-menu, .h-nav, .header-menu { width: 100% !important; float: none !important; /* `flow-root` 而不是 `block` —— 它布局行为跟 block 完全一样, 但会**形成 * BFC 包住浮动子元素**。源站的导航 ul 往往是 float 的, block 父容器 * 高度算不进它 → 容器 46px 而 ul 525px, 溢出 479px 压到 banner 上 * (ynrgjz.com 实测, 就是用户报的"移动端错位")。iOS 13+ / Chrome 58+ 支持, * 不支持的老浏览器退化成 block = 改造前行为, 不会更糟。 */ display: flow-root !important; text-align: left !important; position: relative !important; /* ⚠️ 这三行是**修 bug**, 跟"全宽/网格"无关, 所以放在兜底段 (所有站生效)。 * 源站给导航容器写死了 PC 单行高度 (ynrgjz.com 实测 nav h=101), 而移动端 * 竖排后 ul 有 208px —— 溢出 107px 正好压在 banner 上, 就是用户报的 * "移动端错位": 导航文字跟 banner 图叠在一起。 * 早先版本我把这三行放进了 full-bleed 条件段, 结果搬不动的站 (ynrgjz) 吃不到, * 错位照旧。别再挪回条件段。 */ height: auto !important; max-height: none !important; overflow: visible !important} nav ul, .nav ul, .navbar ul, .menu ul, .header-nav ul, .top-nav ul { padding: 0 !important; margin: 0 !important; list-style: none !important; /* ⚠️ display:block 不能省 —— v2 只给 `nav li` 设了 `display:block; width:100%`, * 但源站的 ul 常是 `display:flex` (横排导航)。flex 容器下 li 的 width:100% * 不会让它们换行, 7 项挤在 430px 里每项只剩 60px, 文字被压成一字一行 * (病例 ygbljx.com: ul.navBar.df display=flex w=420, 截图里"核心价值观" * 竖着排). 兜底模式必须真的竖排。 * 网格模式那条 `display:grid !important` 特异性更高, 不受影响。 */ display: block !important; /* 同上: ul 自己也可能被源站写死高度 */ height: auto !important; max-height: none !important; /* ul 自己 float 的话父容器高度算不进它 (v2 只给 li 清了 float, ul 漏了) * —— ynrgjz.com 实测容器 82px 而 ul 525px, 溢出 443px 压 banner */ float: none !important; width: 100% !important; max-width: 100vw !important; box-sizing: border-box !important} /* 顶级导航 ul 回到文档流 —— 源站常把它 absolute 定位 (PC 下拉菜单的做法), * 那样它**不占父容器高度**: 容器 82px 而 ul 525px, 溢出 443px 压在 banner 上 * (ynrgjz.com 实测, 就是用户报的"移动端错位")。 * ⚠️ 只改**直接子级**的 ul —— 二级 ul (`nav li ul`) 保持源站的 absolute, * 它是下拉浮层, 改了会平铺出来把页面顶开。 */ nav > ul, .nav > ul, .navbar > ul, .menu > ul, .header-nav > ul, .top-nav > ul, #nav > ul, #navbar > ul, nav > div > ul, .nav > div > ul, .navbar > div > ul, #nav > div > ul, #navbar > div > ul, .menu > div > ul { position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important} /* 导航容器内部的中间层 (源站栅格 div) 也要形成 BFC —— 它们不在 * `nav/.nav/...` 名单里, 仍是 block, 包不住浮动的 ul。只加 flow-root, * 不动宽度/定位。 */ nav > div, .nav > div, .navbar > div, .menu > div, .header-nav > div, .top-nav > div, #nav > div, #navbar > div, nav > div > div, .nav > div > div, #nav > div > div, #navbar > div > div { display: flow-root !important; float: none !important; width: 100% !important; max-width: 100vw !important; box-sizing: border-box !important; /* ⚠️ height:auto 是这里的关键 —— 源站给这些栅格 div 写死了 PC 单行高度 * (ynrgjz.com 实测 `.nav_r.bj` 恒 46px), 里面的 ul 竖排后有 525px, * 于是溢出 479px 压在 banner 上 = 用户报的"移动端错位"。 * 光加 flow-root 不够 (那只管"包住浮动"), 写死的 height 还得放开。 */ height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important} nav li, .nav li, .navbar li, .menu li, .header-nav li, .top-nav li { display: block !important; width: 100% !important; float: none !important; border-bottom: 1px solid rgba(0,0,0,0.06) !important} nav a, .nav a, .navbar a, .menu a, .header-nav a, .top-nav a { display: block !important; padding: 14px 18px !important; line-height: 1.5 !important; color: #333 !important; text-decoration: none !important; font-size: 15px !important} nav a:active, .nav a:active, .menu a:active { background: #f5f9ff !important} /* 我方注入的汉堡 (搬不动的站靠它展开导航 · 见 _生成JS.py 的 fallback) */ .seo-mobile-burger { display: inline-block !important; position: fixed !important; top: 8px; right: 8px; z-index: 9998; width: 44px; height: 44px; line-height: 44px; text-align: center; background: rgba(255,255,255,0.95); border: 1px solid #eee; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); cursor: pointer; user-select: none} .seo-mobile-burger::before { content: "≡"; font-size: 28px; color: #1e88e5; font-weight: bold} /* 8.0d 包含导航的祖先容器放开写死高度 (CSS 版 · 不依赖 JS 执行时序) * ──────────────────────────────────────────────────────── * 用户报的"移动端错位"真正机制是**高度塌陷层层传递**: * UL h=525 (竖排后真实高) → DIV h=525 → DIV.nav_r.bj h=46 (§ 8.0b 已放开) * → DIV.main_poxx h=**101** ← 再往上还写死, nav 涨到 561 后溢出它 * → banner (.iBan, body 直接子元素 static, 紧跟其后) 按 101px 排位 * → 跟 561px 的导航垂直重叠 503px, 导航文字压在 banner 图上 * * 这层的类名没有共识 (.main_poxx / .nav_r / .bj / #main_nav ...), 写死清单 * 覆盖不到 —— 又是"白名单式"那个老病 (同 OKA-183/197/203)。 * 用 `:has()` 按**结构**命中: "body 的直接子元素里, 包含 nav 的那个"。 * 只改高度三属性, 不动 float/position/width (那条路已证伪 4 版)。 * `:has()` iOS 15.4+ / Chrome 105+ 支持; 不支持的老浏览器退化成改造前行为。 * * ⚠️ 先用 JS 版 (`放开导航祖先高度()`) 试过, 但它依赖执行时序: 第一拍时 nav * 还只有 82px、这层判据不成立不该改, 等 CSS 让 nav 涨到 561px 真塌陷了却 * 没人再检查 (实测 inline height 始终为空)。CSS 没有时序问题。 */ /* ⚠️ 这份选择器也要跟 JS 的 `_主导航ul()` 同源 —— 它认 `header ul`, * 所以这里必须能命中"含 header 的祖先"。病例 ygbljx.com 的导航是 * `UL.navBar.df` 挂在 `
` 里、**不在 `