Css 保持 table 宽度不变，同时用户在 chrome 上按 ctrl + 以增加字体大小

Question

当用户在键盘上按 ctrl++ 来增加我网页字体的大小时，我希望 table 宽度保持不变，这样我的网站就不会在底部有滚动条。是否可以编写 css 或 javascript 来防止 table 当用户按下 ctrl ++ 时宽度增加？谢谢

Answer 1

使用 width: 100%;（最大值，但您可能需要其他更小的百分比）

浏览器缩放时发生的情况与在屏幕较小的设备上查看网站基本相同。字体确实变大了，但这只是因为 css 像素数量减少了。媒体查询开始发挥作用，其他 css 布局属性也相应处理。 100% 或更小的宽度永远不会比它的容器宽。

见example JSFiddle here

第一个 div 留在容器（可以是屏幕）中，而第二个具有固定宽度，扩展到容器外

您还会注意到在缩放时 JSFiddle 中的面板也会以相同的方式做出反应。

PS：您可能想要构建 some media queries 来处理 table 在不同尺寸下的显示。通过这种方式，您可以完全控制体验并为用户提供精美呈现 table，无论他们的缩放级别或设备屏幕大小如何。