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