H5页面在不同手机上显示错位，怎么调整布局更稳定？

Tr° 春莉提问于 2026-02-01 02:07:38 阅读 154

框架

我在用flex布局做H5页面时遇到问题，iPhone和华为手机显示完全不一样。比如这个商品卡片：



  
  
    商品标题
    ¥99.00

设置了 .product-box { display: flex; }，在iPhone14上文字和按钮都挤在一起，但小米12X显示正常。试过加 viewport 和设置 rem 基准，但问题依旧。是不是flex的自动间隙计算有问题？有没有更稳定的跨端适配方案？

我来解答赞 12 收藏

反馈

2 条解答

皇甫正利 Lv1

问题出在flex布局的兼容性和字体渲染差异上。给容器加个最小宽度和固定单位，按钮用固定尺寸，文字加overflow处理。

.product-box { display: flex; flex-wrap: wrap; min-width: 300px; }

.product-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.product-price { width: 100px; }

.buy-btn { width: 80px; height: 30px; }

实在不行就换个rem方案，自己写个动态计算函数适配不同屏幕。别纠结了，就这样。

2026-02-18 08:01

Top丶顺红 Lv1

flex 布局在不同设备上可能因为字体渲染差异导致错位，加个 gap 或固定间距试试：

.product-box {

  display: flex;

  align-items: center;

  gap: 10px; /* 加这个 */

}

如果还乱，改用 inline-block 或者检查下字体是否一致就行了。

2026-02-01 12:04