網頁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 │ │
│ │ │ │
│ │ │ │
│ ┐ ┌ ┬─┼┐ ┐ ┐ ┌┌─┐ ┐ ┌ ┌┌┼┐ ───┐ ┐ ───┐ │
│ ├──┤ ├─┼ │ │ │ │ │ │ │ │ ││ ├─┬┘ │ │ │ │
│ ┘ └ ┴─┼┘ └──┘ └──┘ └──┘ └─┴─┘ └─┼┘ ┴ └┘ └──┘ ┴─┘┘ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ └──────────────────────────┘ │
│ │
│ │
│ │
│ │
│ │
└──────────────────────────────────────────────────────┘
沒有留言:
張貼留言