在 Chrome M40 中,檢視區域有個微妙的變更,但對使用者來說應該會帶來重大影響。
行動瀏覽器剛推出時,由於缺少可視區域中繼標記,因此會讓網頁誤以為有 980 像素的螢幕空間,並以這個大小顯示。開發人員可以使用可視區域中繼標記定義寬度,最常見的寬度為「device-width」,可將螢幕大小設為裝置的大小。詳情請參閱網站基礎知識。
Rick Byers 描述虛擬 viewport 的方式如下:虛擬 viewport 的概念是將「viewport」一詞分為兩個部分:「版面配置 viewport」(固定位置項目附加的位置) 和「視覺 viewport」(使用者實際看到的內容)。
超簡單範例
網站 videojs.com 就是很好的例子,因為它的應用程式列已固定在頂端,且在應用程式列的左右兩側都有連結。
下圖顯示在放大網站畫面後,左右滑動時會看到的畫面。
最上方的裝置是 Chrome M39,沒有虛擬視區,而最下方的 3 個裝置是 Chrome M40,有虛擬視區。


在 Chrome M39 中,放大後會看到應用程式列,但向右捲動時無法查看列右側的連結,只會看到標誌。
與 Chrome M40 (具有「虛擬可視區域」) 相比,您會發現「視覺可視區域」會捲動「版面配置可視區域」中的所有內容,讓您查看右側的連結。
Internet Explorer 已具備這項行為,而這些變更可讓我們更貼近這項行為。
HTML
開發人員唯一需要注意的變更是,在 M39 中,您可以將 overflow: hidden 套用至 html 元素,而網頁仍會捲動;在 M40 中,系統不再支援此做法,網頁將無法捲動。
更多實體資訊
你想瞭解更多資訊嗎?
那麼,你可以查看下方的投影片。