看網站變得超大又跑版,是什麼問題?螢幕尺寸與比例功能解析

#經驗分享

看網站變得超大又跑版,是什麼問題?螢幕尺寸與比例功能解析

夏木樂的網站,都是有做 RWD 的,所以正常狀況下,使用者無論是電腦還是手機,都應該要能正常看到內容。但我們的客戶偶爾會抱怨,為什麼電腦版看起來版面文字超大,像手機版一樣?

其實這個問題在近年經常發生,夏木樂會先介紹如何自我檢查電腦設定,以及說明發生的原因。

案例:看起來網站好大,版面像手機

下面是一個案例,原本正常的網站畫面:

使用者反應看到的變成下圖這樣,在電腦版顯示了手機版的畫面,而且只有他的電腦是這樣,其他人的電腦看卻都正常:

以下我們先提供一些自我檢查方案。

檢查瀏覽器縮放

Chrome 瀏覽器

可以按下右上角點點選單,觀看縮放比例是否被調整過,若不是 100%,可以手動調回來。

Firefox 瀏覽器

Firefox 的位置與 chrome 類似,右上角漢堡選單拉開,就能看到比例設定。

Safari 瀏覽器

Safari 位在「顯示方式」下拉選單裡面,按下「實際大小」就能會恢復 100%

檢查螢幕畫面解析度與縮放比例

Windows 的設定位置,在 設定 > 系統 > 顯示器 裡面。可以看看顯示器解析度是不是被改成 1280px 以下或更低。然後縮與版面是不是 100%。

如下圖顯示 150% 就可能是有問題的狀況。

而 Mac 的調整位置在 系統設定 > 顯示器 裡面,同樣檢查解析度是不是太低。

以上經過檢查,如果解析度正常大於 1440px 且縮放比例都是 100%,那網站應該就不會跑版了。

為什麼有些 Windows 設定 150% 為預設值

但有些人的電腦,預設就是 150% 縮放比例,造成觀看所有網站版面都怪怪的。像下圖,有些電腦的縮放設定,將 150% 設為建議選項,這不是常見的狀況,只有部分電腦會發生。

不正確的設定成 150%

通常出現這個狀況,當我們請使用者調整回 100% ,網站就恢復正常了,但是字也變小了。不過這是一個很奇怪的情形,為什麼有時候 Windows 會將 150% 設定成建議值呢?正常應該是如下圖這樣的:

下圖才是常見的設定

經過夏木樂查找資訊以後才知道,國外很多網友也在抱怨這件事,因為現代的電腦裝置,解析度越來越大,但是許多裝置可能是比較小台的平板或小筆電之類的。假設有人用這種小型裝置或筆電,卻使用 Full HD 1920 的解析度,Windows 就有可能預設成 150% 的縮放比例。

經過我們請使用者將比例調成 100% 並且解析度使用 1440px 寬度,網站不只恢復正常顯示,字體也恢復正常大小,可以像原本一樣使用電腦了。

現在流行的類筆電平板,有時候會預設超高解析度,或是帶有 retina 螢幕

我的電腦應該設定多大解析度比較好?

這個其實見仁見智,因為解析度越大,文字就會越小,有些人就會把縮放比例調大,自然看到的畫面都很奇怪,比例都不正確。

一般來說,1920px 的 Full HD 寬度,建議用在 23 吋以上的桌面液晶螢幕,較為適合。筆電的話,建議是 16-17 吋以上的筆電,才不會看起來太吃力。

若是一般常見的 14 吋上下的筆電,或是 Surface 之類的類平板,其實都建議設定成 1440px 就好,才不會看不見文字。

可以請網站公司為此改畫面嗎?

有的客戶,因為剛好主管或老闆都用類平板筆電,所以會看到手機版的畫面出現在電腦上,所以詢問我們能不能特別為此修改 RWD 的階段,讓小螢幕也能顯示電腦版。

其實技術上是可以的,網站公司可以將網站的 RWD 切換階段改成更小的寬度,這樣就能在 150% 的畫面下正常看到電腦版選單。

不過由於網站做出來的目的,是要讓普遍大眾看的。如果根據少數的裝置調整,很有可能造成普遍大眾看到的畫面版位不正確。150% 的縮放比例,很可能看市面上大多數網站都會跑位。

這部份我們通常會再請客戶思考一下,建議以最普遍的螢幕設定為基礎去設計會比較好。

若螢幕顯示不調整,只調整畫面,看起來就會不協調

另一種選擇:行動優先

由於多數網站在設計時,是先有電腦版,再去設計手機版的降級式設計,所以手機畫面呈現在電腦上看,自然覺得不好看。

近年來流行另一種稱為「行動優先設計」的模式,先考量手機版的使用,再放大成電腦版設計。因此電腦版看起來的畫面會是乾淨簡潔的,不會讓人那麼不適應。

如果希望手機與電腦看起來的體驗很一致,不要有大範圍的版面位移,不妨嘗試行動優先設計,參考以下文章:

如果您對於網站版面縮放依然有問題,或是有興趣採用行動優先設計,歡迎聯繫夏木樂。

相關文章