如何調整網頁的顯示比例?
【網頁跑版】網頁畫面內容好大!調整網頁正確的顯示比例|天矽科技
目錄:
➤ 網頁內容太大
➤ 如何調整畫面比例
➤ 可能引起的的問題(開發端)
網頁內容太大
有些人在開啟網站時,可能會發現網站為什麼變成手機版而不是電腦版,或是畫面中所顯示的圖文狀態非常的大,這不一定是網頁跑版的問題,通常發生的原因有幾個:
- 瀏覽器比例被調整
- 電腦顯示器問題
- 螢幕解析度問題
因此,我們可以先著手調整這幾個部分,讓網站在瀏覽器中回到正常100%顯示的畫面,若還是真的沒辦法,再向網站設計公司求助喔!
至於網站畫面為什麼不是電腦版而是手機版,是因為網站有製作RWD響應式設計,當檢視的畫面受到尺寸限制時,網站就會自動變成行動裝置、手機版本的樣式畫面,讓使用者可以更方便的瀏覽;當畫面內容的圖文過大時,所顯示的畫面尺寸就會受到限制,為了讓資訊能有更好的展示,網站就會變成手機版畫面給使用者閱讀。
▲網站畫面變很大
如何調整畫面比例
當網站畫面變得比平常還要大的時候,不一定是網站發生跑版,我們可以先著手調整顯示比例,若真的沒辦法再尋求專業人士的支援。以下是幾種我們可以先自行調整的方式。
調整方式:
➤ 調整瀏覽器比例 ➤ 調整電腦顯示器 ➤ 螢幕解析度問題
調整瀏覽器比例
調整瀏覽器最快的方法,就是按下鍵盤上的快捷鍵調整即可,如下。
➤ Windows
- 放大:同時按下「Ctrl」與「+」
- 縮小:同時按下「Ctrl」與「-」
➤ MAC
- 放大:同時按下「Command」與「+」
- 縮小:同時按下「Command」與「-」
如果不使用按鍵的方式調整,也可以點選瀏覽器中的縮放功能進行調整,如下。
➤ Chrome
- 可點選右上方三個點點的目錄選單,選擇「縮放功能」調整大小
- 或可選擇網址列表右側的「放大鏡」縮放大小
➤ Edge
- 可點選右上方三個點點的目錄選單,選擇「縮放功能」調整大小
- 或可選擇網址列表右側的「放大鏡」縮放大小
➤ Firefox
- 點選右上方三條線的目錄選單,選擇「縮放功能」調整大小
➤ Safari
- 選擇最上方的「顯示方式」,選擇「實際大小」即可讓畫面調整成100%
調整電腦顯示器
如果已經將瀏覽器調整為100%的畫面顯示比例,但網站畫面仍然偏大該怎麼辦?我們可以將電腦的顯示比例進行調整,當然也可以再使用瀏覽器縮方功能將畫面縮小繼續檢視。
➤ Windows
- 第一步:點選右鍵「顯示設定」
- 第二步:找到「縮放與版面配置」
將「變更文字、應用程式與其他項目的大小」調整為「100%」即可正常顯示,而顯示器解析度也建議調整為「1920x1080」最多人使用的尺寸。
➤ Mac
- 第一步:在桌面中選擇左上方「蘋果icon」並選擇「系統偏好設定…」進入
- 第二步:在「系統偏好設定」中找到「顯示器」並點選前往
- 第三部:進入「內建顯示器」將解析度調整為「預設」即可
螢幕解析度問題
有時候我們在開啟網站時,為了讓更多人能夠同時瀏覽,因此所使用的螢幕不一定是電腦螢幕,有可能是使用電視大螢幕,比如42吋、32吋…等,這時大螢幕的解析度可能會是125%、150%或175%不一定。
此時可將游標移動到瀏覽器工具上方並按下「右鍵」選擇「內容」開啟「相容性」並在下方「設定」中,將「在高DPI設定時,停用顯示調整值」或「停用全螢幕最佳化」打勾即可。
參考資料:
IT邦幫忙|Chrome 介面變大了,顯示的網頁也變大了,解決方案
可能引起的的問題(開發端)
若以上調整都無法解決,就可能是開發時的設定上出問題,以下是幾種常見的情況:
常見的情況:
➤ 視口設定錯誤 ➤ 斷點尺寸設定錯誤 ➤ 圖片和多媒體未適應 ➤ 瀏覽器兼容性問題
視口設定錯誤
可能沒有在HTML文件的頭部正確設置<mata>標籤,例如:<meta name="viewport" content="width=device-width, initial-scale=1.0">
斷點尺寸設定錯誤
用於根據不同屏幕尺寸調整CSS樣式,需要確保針對各種常見設備(如手機、平板、桌面)的媒體查詢都設置正確,如斷點設置錯誤,特定尺寸下的樣式可能無法正確應用。已下是常見的斷點尺寸:
桌機電腦、筆記型電腦、平板橫屏 1024~1920px | |
---|---|
桌機 | 1920px |
筆電 | 1440px |
筆電-13吋 | 1366px |
平板 | 1024px |
平板直屏、部分手機橫屏 680~980px | |
手機橫屏 | 768px |
手機直屏 480~320px | |
手機-Samsung | 480px |
手機-iphone | 375px |
圖片和多媒體未適應
沒有使用CSS來確保圖片和其他多媒體內容可以根據容器調整大小。EX:使用固定尺寸(以px像素為單位)來設置圖片的寬度和高度,而不是使用相對單位(如%百分比)。這樣做會導致圖片在小屏幕設備上超出容器範圍,破壞佈局。
瀏覽器兼容性問題
不同瀏覽器對CSS和JavaScript的解釋可能不同,有可能發生該裝置系統不支援的情況。可於已下網站查詢樣式是否支援 https://caniuse.com/
以上這些因素都可能導致RWD沒調好,進而引起網頁跑版。開發人員應該在設計和開發過程中進行全面測試,確保網頁在各種設備和瀏覽器上都能正常顯示。