網頁

2021/5/31

CSS Visual viewport 和 Layout viewport 區別

網頁Viewport又分為visual viewport與layout viewport,兩者差別如下。


  • Visual viewport:實際的可見區域。
  • Layout viewport:網頁的全部區域。

在網頁未放大(zoom in)時visual viewport與layout viewport範圍(寬度)相同,而放大網頁後visual viewport的範圍變小,layout viewport範圍不變。

例如下面是一個有HELLO WORLD字樣的網頁,小框框為zoom in後的visual viewport,大框框為layout viewport。

┌──────────────────────────────────────────────────────┐
│ layout viewport                                      │
│                                                      │
│                                                      │
│                                                      │
│                                                      │
│                                                      │
│         ┌──────────────────────────┐                 │
│         │ visual viewport          │                 │
│         │                          │                 │
│         │                          │                 │
│  ┐  ┌ ┬─┼┐ ┐    ┐    ┌┌─┐  ┐   ┌ ┌┌┼┐ ───┐ ┐    ───┐ │
│  ├──┤ ├─┼  │    │    │  │  │ │ │ │ ││ ├─┬┘ │    │  │ │
│  ┘  └ ┴─┼┘ └──┘ └──┘ └──┘  └─┴─┘ └─┼┘ ┴ └┘ └──┘ ┴─┘┘ │
│         │                          │                 │
│         │                          │                 │
│         │                          │                 │
│         │                          │                 │
│         │                          │                 │
│         │                          │                 │
│         │                          │                 │
│         │                          │                 │
│         │                          │                 │
│         │                          │                 │
│         └──────────────────────────┘                 │
│                                                      │
│                                                      │
│                                                      │
│                                                      │
│                                                      │
└──────────────────────────────────────────────────────┘

沒有留言:

張貼留言