H5平板端商品列表从两列变四列需用媒体查询按视口宽度响应式切换：默认grid-template-columns: repeat(2, 1fr)，768px–1023px设为repeat(4, 1fr)，兼容旧浏览器可用flex-wrap配合calc实现。
在 H5 页面中，让平板端商品列表从两列变为四列，核心是用 CSS 媒体查询（@media）匹配平板设备的视口宽度，并动态调整网格（display: grid）或浮动/弹性布局的列数。关键不在于“识别平板”，而在于**按视口宽度响应式切换**——因为平板尺寸有差异（如 iPad mini 宽 768px，iPad Pro 宽 1024px），应以宽度断点为准。
推荐用 grid 实现，简洁可控
假设商品列表容器类名为 .product-list，每个商品项为 .product-item：
默认（小屏，如手机）设为 2 列：
.product-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}在平板常用宽度范围（如 768px–1023px）提升为 4 列：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
@media screen and (min-width: 768px) and (max-width: 1023px) {
.product-list {
grid-template-columns: repeat(4, 1fr);
}
}若需适配更大平板（如横屏 iPad Pro），可扩展断点：
@media screen and (min-width: 1024px) {
.product-list {
grid-template-columns: repeat(4, 1fr);
}
}兼容老浏览器？可用 flex-wrap 替代
如果项目需支持不支持 Grid 的旧版安卓 WebView，改用 Flexbox：
.product-list {
display: flex;
flex-wrap: wrap;
margin: -6px; /* 配合子项内边距实现 gap 效果 */
}
<p>.product-item {
flex: 0 0 calc(50% - 12px); /<em> 默认 2 列：宽 = 50% - 间隙 </em>/
margin: 6px;
}</p><p>@media screen and (min-width: 768px) and (max-width: 1023px) {
.product-item {
flex: 0 0 calc(25% - 12px); /<em> 平板 4 列：宽 = 25% - 间隙 </em>/
}
}注意实际适配细节
- 别依赖设备像素比或 UA 判断平板：iOS/Android 平板 UA 差异大，且横竖屏切换时宽度变化，仅靠 UA 易失效；
-
设置 viewport：确保 HTML 中有
<meta name="viewport" content="width=device-width, initial-scale=1">，否则媒体查询可能不触发； -
断点选 768px 是行业惯例，但建议结合设计稿和真机测试微调，比如部分安卓平板竖屏只有 600px 宽，可加
min-width: 640px覆盖； - 图片和文字需同步缩放：列数变多后，单个商品卡片内容易被压缩，记得限制最小宽度或调整字体大小。
验证是否生效的小技巧
在 Chrome DevTools 中切换设备模拟器（如 iPad、Pixel Tablet），或直接拖动浏览器窗口宽度，观察元素计算后的 grid-template-columns 值是否随宽度变化。也可临时加 border: 1px solid red 看列分布是否均匀。
