根據useit .com 2006年7月調查, 1024螢幕寬度是目前最多人使用的, 約佔60%, 800螢幕寬度的使用者約17%, 其餘的是1280(含)以上的大螢幕顯示器, 目前最佳螢幕解析為1024 x 768.
運用這兩項屬性有什麼好處呢? 先從各種螢幕寬度的使用探討:
1. 如果設定為1024寬度, 那麼800寬度的螢幕會出現橫向捲軸, 造成17%使用者的閱讀性不佳.
2. 如果設定為800寬度, 資料多的網頁無法將最重要的內容在不拉捲軸情況下完整顯示出來.
3. 如果設定為彈性寬度(內容隨螢幕大小延展), 當螢幕過寬時(如1280以上), 對以文字為主的網頁會有閱讀上的困難.
一般的網頁內容都是由左排到右, 當我們瀏覽網頁時, 眼球會隨文章寬度從左邊慢慢移到右邊, 折行時再將眼球移回左邊第一個字, 這時如果寬度拉太長, 容易發生找不到承接剛才那一行字的情況, 螢幕越寬問題越嚴重, 這也是為什麼實體的報章雜誌排版都會採用分欄排版的原因: 為了讓讀者的眼睛可以保持一個角度從上閱讀到下, 眼球不用左邊右邊轉來轉去.
可是限制寬度是否會讓買寬螢幕的人無法發揮寬螢幕的作用? 買大螢幕可能是看影音圖檔, 玩遊戲或者專業繪圖等原因的需求, 不是拿來讀會讓眼球轉來轉去的文章, 如果是這種情況, 恐怕讀不了幾行就會放棄, 不然就要手動將瀏覽器寬度拉窄一些.
所以最大寬度設定就派上用場了, 做法如下:
IE7和其他瀏覽器可以直接使用max-width與min-width, 但是顧慮還有多數人使用舊版的IE瀏覽器, 所以要在width再加上一行script語法 (或可到http://www.svendtofte.com/code/max_width_in_ie/ 參看說明)
針對IE6, 除了加script語法, 還需讓它的顯示模式轉為相容模式(請參考瀏覽器的顯示模式一文), 做法有4種 (svendtofte.com採用第4種作法, 我再加上第1, 2, 3種作法):
1. 網頁Doctype宣告上方已經有xml宣告 <?xml version="1.0" encoding="big5" ?>
2. 網頁不需要有xml宣告的可以加上一行註解, 如 <!-- force IE6 into quirks mode -->
3. 使用不加網址的宣告
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
4. 不加任何宣告(非web標準做法, 不建議採用)
最大寬度設定
以下範例將最大寬度設為950px/置中, 當螢幕大於950px的會以這個寬度顯示, 小於950的則以實際螢幕寬度顯示, 例如750寬度的內容自動以750寬度顯示, 不會出現橫向捲軸. 瀏灠器的畫面如下:
1280寬度螢幕(兩邊空白)
750寬度螢幕(不會產生橫向捲軸)
Css寫法如下:
<style>
body {
text-align: center;
padding: 0px;
margin: 0px;
width: 100%;
}
div {
margin: 20px auto;
border: red 2px solid;
max-width: 950px;
width: expression(document.body.clientWidth > 950? "950px": "auto" );
}
</style>
html寫法如下:
<div>
<p>最大寬度測試網頁, 最大寬度測試網頁, …….</p>
</div>
最小寬度設定 (寫法與最大寬度相近)
以下範例將最小寬度設為780px/置中, 螢幕大於780px的話, 內容會隨螢幕寬度延展為滿版, 小於780的則以780寬度顯示, 並出現橫向捲軸, 瀏灠器的畫面如下:
1280寬度螢幕(滿版)
650寬度螢幕(產生橫向捲軸)
Css寫法如下:
<style>
body {
text-align: center;
padding: 0px;
margin: 0px;
width: 100%;
}
div {
margin: 20px auto;
border: red 2px solid;
min-width: 780px;
width: expression(document.body.clientWidth < 780? "780px": "auto" );
}
</style>
html寫法如下:
<div>
<p>最小寬度測試網頁, 最小寬度測試網頁, …….</p>
</div>
最小寬度應用的時機可能是為了維持某些排版或內容呈現的完整性, 不希望隨螢幕縮小產生變動, ㄧ般來說, 最大寬度設定的需求會比較廣些.
1 則留言:
張貼留言