有什么区别 : window screen 和 port screen

Question

我有一个带有此媒体查询的 WordPress 网站

@media screen and (min-width: **312px**) { }

现在有两个术语

1：window 大小（320x533）= window 大小 320x533 / 视口 304x420

2: ( 320x533) 的视图端口大小 = window 大小 336x646 / 视图端口 320x533

什么是 windows 大小和视图大小

Answer 1

您在网页设计中应该关心的是视口。视口是浏览器 window 内呈现网站的可见区域。视口通常会被滚动条稍微遮挡（因此变小）。

带滚动条的 320px 宽度的视口在考虑滚动条后实际上可能只有 303px。