/* * YDR 海外站 (ydrintl.com) 移动端适配 * 目标：修复手机端图文挤压/错位，重点解决购物车界面。 * 适配方法（三种并存，按需启用）： * A. 纯 CSS 媒体查询 —— 检测「渲染视口宽度」，无需 JS，最稳健（默认生效）。 * B. 预渲染检测 JS —— 在首屏绘制前给 打 .viewport-* / .device-* 类， * CSS 可据此精确区分「屏幕大小」与「设备类型」（见 device-detect.js）。 * C. 服务端检测 —— functions-snippet.php 里用 wp_is_mobile() 给 body 加 .is-mobile 类。 * 无论哪种，基本验收：图文对应、文字不错位、不拥挤。 */ /* ============================================================ * 0. 移动端基础重置（<768px 生效） * ============================================================ */ @media (max-width: 767px) { :root { --ydr-gap: 12px; --ydr-pad: 16px; --ydr-radius: 12px; } /* 全局：图片不溢出、文字不挤压、长英文/链接可断行 */ img, video, canvas { max-width: 100% !important; height: auto !important; display: block; } body { font-size: 15px; line-height: 1.6; -webkit-text-size-adjust: 100%; overflow-x: hidden; /* 杜绝横向滚动条与错位 */ word-break: break-word; } p, li, td, th, .entry-content, .woocommerce-info, .woocommerce-message { line-height: 1.65; } /* 所有容器不再超出视口。 ⚠️ 坑（2026-08-03）：绝不能给这组【嵌套】容器统一加 padding —— .site/.col-full/.content-area/.site-main/.hentry/.entry-content 是 6 层嵌套， 每层左右各 16px 会累计削掉 192px，390px 视口只剩 ~150px，内容被挤成竖条。 正确做法：嵌套容器只限宽、不加 padding；页边距只给最外层 .col-full 一次。 */ .site, .col-full, .content-area, .site-main, .hentry, .entry-content { max-width: 100% !important; box-sizing: border-box; } /* 页面安全边距：只加在最外层一次 */ .col-full { padding-left: 12px !important; padding-right: 12px !important; } /* 内层容器若被主题/本文件旧版加过左右 padding，全部清零，防止累计 */ .content-area, .site-main, .hentry, .hentry .entry-content, .entry-content { padding-left: 0 !important; padding-right: 0 !important; } /* 多列栅格在手机上强制单列，避免图文挤在一起 */ .storefront-product-section .columns-2, .storefront-product-section .columns-3, .storefront-product-section .columns-4, .site-main .columns-2, .site-main .columns-3, .site-main .columns-4, .woocommerce .products.columns-2, .woocommerce .products.columns-3, .woocommerce .products.columns-4 { display: grid !important; grid-template-columns: 1fr !important; gap: var(--ydr-gap); } /* 通用区块间距，缓解拥挤 */ .entry-content > *, .site-main > * { margin-top: var(--ydr-gap); margin-bottom: var(--ydr-gap); } /* 按钮在手机上全宽、好点按 */ .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button, button.single_add_to_cart_button, .checkout-button, #respond input#submit { width: 100%; text-align: center; padding: 14px 16px; font-size: 15px; box-sizing: border-box; } } /* ============================================================ * 1. 顶部导航 / 语言切换（避免桌面菜单在手机上错位） * ============================================================ */ @media (max-width: 767px) { .site-header .col-full { flex-direction: column; align-items: stretch; } .main-navigation { float: none; width: 100%; } .storefront-primary-navigation { display: block; } /* 语言切换入口保持可点，不挤压 */ .wpml-ls, .polylang-switcher, .language-switcher { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; } .wpml-ls-item, .polylang-switcher li { flex: 0 0 auto; } } /* ============================================================ * 2. 购物车界面（重点修复：WooCommerce Blocks 单列布局 + 充分利用空间） * 说明：本店 cart 用的是 WooCommerce Blocks（``）， * 不是 classic `.woocommerce-cart-form table.cart`，所以选择器全部更新。 * 移动端目标：图文对应、不竖排错位、左右 padding 适中、不浪费空间。 * ============================================================ */ @media (max-width: 767px) { /* ---------- 2.1 整张 cart 单列布局 ---------- */ .wp-block-woocommerce-cart.alignwide, .wp-block-woocommerce-filled-cart-block, .wc-block-components-sidebar-layout.wc-block-cart { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } .wp-block-woocommerce-cart-items-block, .wp-block-woocommerce-cart-totals-block, .wc-block-cart__main, .wc-block-cart__sidebar { width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; } .wp-block-woocommerce-cart-items-block { margin-bottom: 16px !important; } .wp-block-woocommerce-cart-totals-block { margin-top: 16px !important; } /* ⚠️ 坑：table 默认 shrink-to-fit，row 改成 grid 后表体失去撑宽来源， 整张表会塌成 min-content（商品名被挤成单字竖排）。 必须显式让 table/tbody 100% 宽并把 display 改为 block。 */ table.wc-block-cart-items, .wc-block-cart-items { width: 100% !important; display: block !important; table-layout: auto !important; } .wc-block-cart-items tbody { display: block !important; width: 100% !important; } /* 隐藏无意义的表头 */ .wc-block-cart-items__header { display: none !important; } /* ---------- 2.2 每个商品 row：卡片式 3 列 grid（image | content | total+remove）---------- */ table.wc-block-cart-items .wc-block-cart-items__row, .wc-block-cart-items .wc-block-cart-items__row { display: grid !important; grid-template-columns: 88px minmax(0, 1fr) auto !important; /* minmax(0,1fr) 阻止子元素溢出 */ grid-template-rows: auto auto !important; grid-template-areas: "image product total" "image meta remove" !important; column-gap: 12px !important; row-gap: 6px !important; align-items: start !important; /* 卡片式：白底 + 圆角 + 细边 + 轻投影，向左右撑满 */ background: #fff !important; border: 1px solid #e8e8e8 !important; border-radius: 12px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .06) !important; padding: 14px 12px !important; margin: 0 0 12px !important; width: 100% !important; box-sizing: border-box !important; } /* 商品图：左侧固定 88×88 圆角 */ .wc-block-cart-items__row .wc-block-cart-item__image { grid-area: image !important; grid-column: 1 / 2 !important; grid-row: 1 / 3 !important; padding: 0 !important; margin: 0 !important; width: 88px !important; } .wc-block-cart-items__row .wc-block-cart-item__image a, .wc-block-cart-items__row .wc-block-cart-item__image img { display: block !important; width: 88px !important; height: 88px !important; object-fit: cover !important; border-radius: 8px !important; margin: 0 !important; } /* 商品名 + 价格：第一行中间列 */ .wc-block-cart-items__row .wc-block-cart-item__product { grid-area: product !important; grid-column: 2 / 3 !important; grid-row: 1 / 2 !important; padding: 0 !important; min-width: 0 !important; /* 关键：让 product 块可被压缩 */ display: flex !important; flex-direction: column !important; gap: 4px !important; } .wc-block-cart-items__row .wc-block-cart-item__product .wc-block-components-product-name { font-size: 15px !important; font-weight: 600 !important; line-height: 1.4 !important; margin: 0 !important; color: #222 !important; } .wc-block-cart-items__row .wc-block-cart-item__product .wc-block-components-product-name a { color: inherit !important; text-decoration: none !important; } .wc-block-cart-items__row .wc-block-cart-item__product .wc-block-components-product-metadata { font-size: 12px !important; color: #777 !important; line-height: 1.4 !important; } .wc-block-cart-items__row .wc-block-cart-item__prices { margin-top: 0 !important; flex-wrap: wrap !important; font-size: 13px !important; } .wc-block-cart-items__row .wc-block-cart-item__product .wc-block-components-product-price { font-size: 13px !important; } /* 小计：第一行右列 */ .wc-block-cart-items__row .wc-block-cart-item__total { grid-area: total !important; grid-column: 3 / 4 !important; grid-row: 1 / 2 !important; padding: 0 !important; text-align: right !important; align-self: start !important; font-size: 15px !important; font-weight: 700 !important; color: #222 !important; white-space: nowrap !important; } .wc-block-cart-items__row .wc-block-cart-item__total-price-and-sale-badge-wrapper { align-items: flex-end !important; flex-direction: column !important; gap: 2px !important; } /* 数量 + 删除：第二行 */ .wc-block-cart-items__row .wc-block-cart-item__quantity { grid-area: meta !important; grid-column: 2 / 3 !important; grid-row: 2 / 3 !important; padding: 0 !important; display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; margin-top: 4px !important; } /* 数量选择器：保持 110px 宽，确保 +/- 按钮和输入框齐全 */ .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-components-quantity-selector { width: 110px !important; min-width: 110px !important; flex: 0 0 110px !important; } .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-components-quantity-selector__input { font-size: 14px !important; } /* 删除按钮：第二行右列 */ .wc-block-cart-items__row .wc-block-cart-item__remove-link { grid-area: remove !important; grid-column: 3 / 4 !important; grid-row: 2 / 3 !important; align-self: end !important; justify-self: end !important; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; padding: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; color: #999 !important; font-size: 20px !important; line-height: 1 !important; background: transparent !important; border-radius: 50% !important; } .wc-block-cart-items__row .wc-block-cart-item__remove-link svg { width: 20px !important; height: 20px !important; } /* ---------- 2.3 订单合计 sidebar ---------- */ .wp-block-woocommerce-cart-order-summary-block { width: 100% !important; padding: 18px !important; margin: 0 !important; background: #fff !important; border: 1px solid #e8e8e8 !important; border-radius: 12px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .06) !important; border-bottom: 1px solid #e8e8e8 !important; box-sizing: border-box !important; } .wc-block-components-totals-wrapper { padding: 0 !important; } .wc-block-components-totals-item { padding: 8px 0 !important; } /* 优惠券：横向 flex，输入框占满，按钮紧贴右侧（解决"添加优惠券"竖排） */ .wc-block-components-totals-coupon { display: flex !important; flex-direction: column !important; gap: 8px !important; width: 100% !important; padding: 8px 0 !important; } .wc-block-components-totals-coupon__form { display: flex !important; flex-direction: row !important; gap: 8px !important; width: 100% !important; margin: 0 !important; flex-wrap: nowrap !important; } .wc-block-components-totals-coupon__input { flex: 1 1 auto !important; min-width: 0 !important; /* 关键：阻止输入框被压到 1 字宽 */ width: 100% !important; height: 44px !important; padding: 10px 12px !important; box-sizing: border-box !important; font-size: 14px !important; } .wc-block-components-totals-coupon__button { flex: 0 0 auto !important; white-space: nowrap !important; padding: 0 16px !important; height: 44px !important; line-height: 44px !important; font-size: 14px !important; } .wc-block-components-totals-coupon button.wc-block-components-button { padding: 0 16px !important; height: 44px !important; line-height: 44px !important; font-size: 14px !important; white-space: nowrap !important; } /* ---------- 2.4 提交按钮（继续结算）---------- */ .wc-block-cart__submit-container { padding: 0 !important; margin: 16px 0 0 !important; width: 100% !important; } .wc-block-cart__submit, .wc-block-cart__submit-container--sticky { margin: 0 !important; padding: 0 !important; } .wc-block-cart__submit-container--sticky { background: transparent !important; box-shadow: none !important; position: static !important; } .wc-block-cart__submit-button, .wc-block-components-button.wc-block-cart__submit-button { width: 100% !important; padding: 14px 16px !important; font-size: 15px !important; height: auto !important; min-height: 48px !important; box-sizing: border-box !important; } /* ---------- 2.5 支付方式（express payment）---------- */ .wc-block-cart__payment-options { padding: 16px 0 0 !important; } .wc-block-components-express-payment--cart { margin: 0 !important; padding: 0 !important; } .wc-block-components-express-payment__event-buttons { display: flex !important; flex-direction: column !important; gap: 8px !important; } .wc-block-components-express-payment__event-button { width: 100% !important; height: 48px !important; } /* 空购物车状态 */ .wp-block-woocommerce-empty-cart-block { text-align: center !important; padding: 32px 16px !important; } .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title { font-size: 20px !important; margin: 16px 0 !important; } } /* ============================================================ * 3. 结算页（WooCommerce Blocks checkout，卡片式单列） * 说明：本店 checkout 用的是 WooCommerce Blocks * （`.wp-block-woocommerce-checkout` + `.wc-block-components-sidebar-layout`）， * 桌面端是 grid 双列（表单 | 订单摘要 350px），移动端必须： * ① 外层改 flex 单列 ② main/sidebar 各 100% 宽（否则表单被挤成 min-content 竖条） * ③ 每个步骤区块做成卡片 ④ 订单摘要做成卡片并置顶。 * ============================================================ */ @media (max-width: 767px) { /* ---------- 3.1 外层容器全宽、单列 ---------- */ .wp-block-woocommerce-checkout, .wp-block-woocommerce-checkout.alignwide { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .wc-block-components-sidebar-layout.wc-block-checkout, .wc-block-components-checkout-layout { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .wc-block-components-main.wc-block-checkout__main, .wp-block-woocommerce-checkout-fields-block, .wc-block-components-sidebar.wc-block-checkout__sidebar, .wp-block-woocommerce-checkout-totals-block { width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; position: static !important; /* sidebar 桌面端 is-sticky，移动端还原 */ box-sizing: border-box !important; } .wc-block-checkout__form, .wc-block-components-form { width: 100% !important; box-sizing: border-box !important; } /* ---------- 3.2 订单摘要：移动端只保留主流程内的完整展开版 ---------- WC Blocks 会渲染两份摘要：sidebar 折叠版（桌面右栏）+ 主流程展开版。 移动端隐藏 sidebar 折叠条，避免同一页面出现两个订单摘要。 */ .wc-block-components-sidebar.wc-block-checkout__sidebar { display: none !important; } /* 主流程内的完整订单摘要 = 卡片 */ .wp-block-woocommerce-checkout-order-summary-block { width: 100% !important; background: #fff !important; border: 1px solid #e8e8e8 !important; border-radius: 12px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .06) !important; padding: 14px !important; margin: 0 0 14px !important; box-sizing: border-box !important; } .wc-block-components-checkout-order-summary__title { width: 100% !important; padding: 0 !important; } /* ---------- 3.3 每个步骤区块 = 一张卡片（联系方式/账单地址/付款选项）---------- */ .wc-block-components-checkout-step, .wc-block-checkout__contact-fields, .wc-block-checkout__billing-fields, .wc-block-checkout__payment-method, .wc-block-checkout__order-notes, .wc-block-checkout__terms, .wc-block-checkout__actions, .wc-block-components-express-payment--checkout, .wc-block-components-express-payment-continue-rule--checkout { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } fieldset.wc-block-components-checkout-step, .wc-block-checkout__order-notes, .wc-block-checkout__terms { background: #fff !important; border: 1px solid #e8e8e8 !important; border-radius: 12px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .05) !important; padding: 16px 14px !important; margin: 0 0 14px !important; } .wc-block-components-checkout-step__content { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 8px 0 0 !important; box-sizing: border-box !important; } .wc-block-components-checkout-step__heading-container { width: 100% !important; padding: 0 !important; margin: 0 !important; } /* ---------- 3.4 表单字段：全部横向撑满卡片 ---------- */ .wc-block-components-form .wc-block-components-checkout-step__content > *, .wc-block-components-address-form, .wc-block-components-address-form > *, .wc-block-components-text-input, .wc-block-components-country-input, .wc-block-components-state-input, .wc-block-components-select-input, .wc-block-components-combobox { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .wc-block-components-text-input input, .wc-block-components-text-input textarea, .wc-block-components-select-input select, .wc-block-components-address-form input, .wc-block-components-address-form select { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; font-size: 15px !important; } /* 姓名/城市邮编等半宽字段：两两一行，各占一半，避免硬挤 */ .wc-block-components-address-form { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; } .wc-block-components-address-form > .wc-block-components-text-input, .wc-block-components-address-form > .wc-block-components-country-input, .wc-block-components-address-form > .wc-block-components-state-input { flex: 1 1 100% !important; } .wc-block-components-address-form > .wc-block-components-text-input:first-child, .wc-block-components-address-form > .wc-block-components-text-input:nth-child(2) { flex: 1 1 calc(50% - 5px) !important; } /* ---------- 3.5 快捷支付（PayPal 按钮）：全宽 ---------- */ .wc-block-components-express-payment--checkout { padding: 0 !important; margin: 0 0 14px !important; } .wc-block-components-express-payment__event-buttons { display: flex !important; flex-direction: column !important; gap: 8px !important; width: 100% !important; } .wc-block-components-express-payment__event-button { width: 100% !important; min-height: 48px !important; } .wc-block-components-express-payment-continue-rule--checkout { margin: 4px 0 14px !important; } /* ---------- 3.6 付款方式单选项：卡片化 ---------- */ .wc-block-components-radio-control__option { width: 100% !important; box-sizing: border-box !important; border: 1px solid #e8e8e8 !important; border-radius: 10px !important; padding: 12px 14px !important; margin: 0 0 8px !important; background: #fff !important; } .wc-block-components-radio-control__option--checked { border-color: #222 !important; } .wc-block-components-radio-control__option label, .wc-block-components-radio-control__option .wc-block-components-radio-control__option-layout { width: 100% !important; box-sizing: border-box !important; } /* ---------- 3.7 下单按钮：全宽大按钮 ---------- */ .wc-block-checkout__actions_row { width: 100% !important; justify-content: stretch !important; } .wc-block-checkout__actions .wc-block-components-button, .wc-block-checkout__actions_row .wc-block-components-button { width: 100% !important; min-height: 50px !important; font-size: 16px !important; } /* ---------- 3.8 我的账户 classic 表格（保留）---------- */ .woocommerce form .form-row, #customer_details .col-1, #customer_details .col-2 { width: 100% !important; float: none !important; margin: 0 0 12px; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { width: 100% !important; padding: 12px; box-sizing: border-box; } .woocommerce table.shop_table_responsive tr td, .woocommerce table.my_account_orders tr td { text-align: right; padding: 8px 0; } .woocommerce table.shop_table_responsive tr td::before { float: left; font-weight: 600; color: #333; } } /* ============================================================ * 4. 商品列表 / 详情页（图文对应、不拥挤） * ============================================================ */ @media (max-width: 767px) { .woocommerce ul.products[class*="columns-"] li.product, .woocommerce-page ul.products[class*="columns-"] li.product { width: 100% !important; margin: 0 0 var(--ydr-gap); float: none !important; } .woocommerce div.product div.images, .woocommerce div.product div.summary { width: 100% !important; float: none !important; margin: 0 0 16px; } .woocommerce div.product .woocommerce-product-gallery { width: 100% !important; margin-bottom: 16px; } .woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: 6px; } .woocommerce-tabs ul.tabs li { float: none; width: auto; } } /* ============================================================ * 5. 预渲染检测类钩子（由 device-detect.js / 服务端注入） * 用法示例：仅在「真·手机设备」上隐藏某桌面元素 * ============================================================ */ .viewport-mobile .ydr-desktop-only { display: none !important; } .device-mobile .ydr-desktop-only { display: none !important; } .is-mobile .ydr-desktop-only { display: none !important; } .ydr-mobile-only { display: none !important; } .viewport-mobile .ydr-mobile-only, .device-mobile .ydr-mobile-only, .is-mobile .ydr-mobile-only { display: block !important; }