响应式移动设计在其他设备上看起来不同

Question

我有一个问题。 我为我们的商店做了一个响应式设计， 问题是当我测试移动可用性和设计时（我正在使用 Browserstack 进行测试） 一切看起来都很好。 当我在我自己的手机（iPhone 手机壳）上测试它时，即使在我的 htc u11 上它看起来也很好。 但是当我的老板查看他的手机（iPhone 11 Pro）时，他发现了一些问题并告诉我修复它。我不明白为什么？

主要问题是文字描述。

该类别的商店网址：https://www.subtel.de/Notebook-Zubehoer/?view_type=grid_view

这是一些截图和我的 html/css

css:

.productinfo_grid_view{
    line-height: 16px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    height: 34px;
    white-space: normal;
    grid-column: 1/7;
    grid-row: auto;
    margin-bottom: 5px;
    margin-right: 5px;
    width: 80%;
    margin-left: 12%;
}

html:

<span class="productinfo_grid_view">
    <a itemprop="url" id="[{$testid}]" href="[{$_productLink}]" title="[{$_sTitle}]"><span itemprop="name">[{$_sTitle}]</span></a>
</span>

你可以看到它没有什么特别的， 当您看到我老板给我的屏幕截图以及我的手机和浏览器堆栈的屏幕截图时。我很困惑有没有人提示我如何解决这种问题？

第一张较小的图片是我老板的截图，第二张图片是它的外观以及它在我手机上的外观。

Answer 1

看起来你已经为你的描述设置了一个固定的高度。

尝试删除height: 34px;

编辑： 或者如果你想保持一个固定的高度并隐藏溢出

尝试添加display: inline-block;

Answer 2

似乎网站正在缩放。请使用<meta> 标记禁用移动网页上的缩放。

<meta name="viewport" content= "width=device-width, user-scalable=no">

或

您必须移除文字说明的固定高度，并为说明添加文字限制。

Answer 3

请将height: 30px; 更新为height: 34px;

.productinfo_grid_view{  
    height: 30px;
}