跳到主要內容
  • 字級
:::|

1.4.10 CS2141006E 使用媒體查詢(media query)來解除粘滯的頁首/頁尾

稽核評量碼

CS2141006E

對應成功準則

1.4.10

對應認證等級

AA

對應國際技術碼

C34

類別

CSS

訊息

使用媒體查詢來解除粘滯的頁首/頁尾

英文訊息

C34: Using media queries to un-fixing sticky headers/footers

規則說明

在橫向使用裝置或桌面放大時,解除粘滯頁首和頁尾的內容,以可獲得更大的可見視圖。

解開粘滯頁首/頁尾的基本方法:

  1. 使用媒體查詢min-height屬性定義第一個粘滯區域,以便根據可用空間固定或取消固定;
  2. 使用特定視埠大小的媒體查詢min-width和max-height屬性定義其他粘滯區域,以便根據可用空間將其固定或取消固定,例如:對於平板電腦,取決於裝置的直向或橫向位置。

檢測說明

程序

注意:此測試依據測試的環境,可能有不同的實際模式或大小。

  1. 以直向模式在裝置/使用者代理上顯示內容。
  2. 將方向更改為橫向。
  3. 檢查粘滯的頁首和頁尾是否依據既有的媒體查詢設定而取消固定。
  4. 在以1280x1024 CSS像素的起始視埠寬度的桌面/使用者代理上顯示內容。
  5. 更改寬度和高度的視埠大小或使用瀏覽器的縮放功能。
  6. 檢查粘滯的頁首和頁尾是否依據既有的媒體查詢設定而以特定尺寸取消固定。

預期結果

#3和#6為是。

說明