android - 无法在所有设备上使 HTML 表格的宽度一致

Question

我正在尝试使所有设备上的表格宽度保持一致，以便在加载网站的移动设备上不会溢出到视图的右侧和外部。这里有两张图片进行比较，仅显示了数十种不同移动设备（iOS 和 Android）中的两个示例。

我尝试将表格 CSS 更改为不同程度，包括宽度、最大宽度、固定等。但似乎没有任何效果。我认为在所有设备之间对给定宽度进行简单折衷就可以解决问题，但宽度无论如何都没有影响。几乎就像浏览器不再识别宽度属性一样。

要进入此屏幕，请在https://intechrahealth.com/将产品添加到购物车。这是结帐页面。任何帮助表示赞赏。

标签： androidhtmlcssios

Answer 1

你font-size的太大了。如果你缩小它，整个桌子可以缩小并适合。在此处更改此查询

@media (max-width: 479px)
  #content table.cart td, #content table.cart th, #content table.cart tr, table.cart
  td, table.cart th, table.cart tr {
    padding: .857em .287em!important;
  }
}

对此有响应font-size

@media (max-width: 479px)
  #content table.cart td, #content table.cart th, #content table.cart tr, table.cart
  td, table.cart th, table.cart tr {
    padding: .857em .287em!important;
    font-size: 3vw;
  }
}