Web技術基礎
在也支援智慧型手機的響應式設計網頁中，於<head>寫入 <meta name="viewport" content="width=device-width, initial-scale=1"> 的主要目的為下列何者？
- A讓配置網頁的寬度符合裝置螢幕的寬度，不縮小地顯示
- B讓伺服器配合裝置螢幕的解析度，自動重新產生影像
- C只在個人電腦的瀏覽器上顯示，拒絕來自智慧型手機的存取
查看答案與解析
正確答案：A. 讓配置網頁的寬度符合裝置螢幕的寬度，不縮小地顯示
沒有這項設定時，智慧型手機的瀏覽器會以假設為電腦版網頁的寬幅（一般約980px）配置網頁，再縮小到能放進螢幕的大小顯示。width=device-width讓配置寬度符合裝置螢幕的寬度，initial-scale=1讓初始縮放比例為原尺寸。在此基礎上，以CSS的媒體查詢（例如 @media (max-width: 600px)），依螢幕寬度切換版面配置與文字大小。
- A. 正確。讓配置寬度符合螢幕寬度，以不縮小的比例顯示。
- B. 要讓瀏覽器選擇適合螢幕的影像，要使用img元素的srcset屬性等。viewport設定並不會讓伺服器產生影像。
- C. viewport設定是決定顯示寬度與縮放比例，沒有拒絕存取的功能。