Google路线表未正确调整大小

Question

我在基于Google Directions的网站上遇到问题，该网站无法正确适应小型移动设备屏幕。以下是下图中的问题：

在Chrome中它不会缩小到395像素宽度以下这是一个问题，因为很多手机的屏幕宽度较小，因此部分信息不可见。在Firefox中，它不会低于307像素的宽度，这不是一个大问题，但如果它可以在这个下更多一点，那将是很好的。 使用Chrome检查我发现问题的起始位置，它位于html表元素上，其中包含＆＃34; adp-directions＆＃34;类。图片如下。 我尝试将此类的宽度更改为100％，并将固定宽度更改为395px以下，但不会低于395px。我试着把重要的东西放在CSS里来覆盖我可能看不到的任何其他款式，但仍然没有......如果你能以某种方式请我帮助我，因为我完全被困在这里而且不知道我还能做些什么。 ..以下是该网站的链接：link

Answer 1

尝试将媒体查询放入较小视图的字体大小

@media (max-width:420px){table.adp-directions { font-size: 12px !important;}} 这可能会解决你的问题。但如果你不喜欢减小字体大小，请做评论。

Answer 2

我工作时将word-break添加到最宽的列中，为了打破长描述，这允许列减小其宽度：

@media (max-width: 420px) {
    table.adp-directions tr td:nth-child(3) {
        word-break: break-all;
     }
}