skip to main content

響應式網頁設計與手機版網站分別,兩者優缺點比較,那種比較好?

於2020年8月3日更新


響應式網頁設計與手機版網站分別,兩者優缺點比較,那種比較好?影片
點擊圖片觀看影片版本

為甚麼有響應式網頁設計和手機版網站的概念?

以前沒有手機的年代,所有網頁都是為台式機的大屏幕而設計。但是自從智能手機面世,並且越來越多時候被用來瀏覽網站後,人們在手機上看到網頁的圖片和字體都顯得非常小

就算沒有近視的人都要將每頁的字體放到很大才能看得見,瀏覽起一篇文章時來又放大又要移來移去,很不方便。

響應式網頁設計手機版網站都是用來解決這個問題的方法。使用這兩種方法的目的都是讓網頁在行動裝置上,例如在平板電腦或手機中能夠清晰地顯示給用戶。但是兩者之間的區別在那,讓我們來看看吧。

手機版網站

手機版網頁是將同一個網站分為兩個完全獨立的版本正常版本(給台式機看)手機版

兩個版本分別有自己獨立的網址區分,通常是

然後根據你用手機或台式機去瀏覽,就會導向用戶去相應的網站版本。

這種是智能手機剛剛出來沒多久後的解決方法—>用兩套代碼建造/一個網站做兩次

但是後來手機版網頁的做法實在不行了,原因是後來有了平板電腦,大型的Smart TV等很多不同裝置,他們有著許多不同裝置大小難道我要一個網站要做五個版本嗎?

還不止呢,做完以後還要管理代碼,那就有五套代碼....這就不太可行了。

因此,響應式網頁設計就被發明了出來就解決了這些問題了。

響應式網頁設計

不同類型裝置屏幕

響應式網頁設計英文叫Responsive Web Design,簡稱RWD。這種網站設計方法能讓網頁可以在幾乎任何尺寸的裝置,無論是手機,平板電腦,台式電腦,甚至是4K/8K大型電視都可以只用一套代碼來完成

網址方面是用同一個網址,無需像手機版網頁那麼需要有兩個網址,用戶用正常網址www.example.com時,網站就能自動調整網站顯示方式去適應該裝置尺寸。

這樣的話網站開發者在寫網站,和管理方面也就輕鬆得多。也就是為甚麼手機版網站現在已經幾乎不復存在,只有一些沒有更新知識的人在說而已(難怪,因為這個轉變來得也挺快)。

響應式網頁和Google SEO

到2020年的現在,響應式網頁已經不是新東西,而且在Google SEO方面已經是一個標配,Google叫這個Mobile Friendliness / Mobile SEO優化

總括來說讓網站的所有頁面都做到響應式設計,即讓用戶在任何屏幕大小設備中都能清楚看見所有網頁內容的話,就能更有效吸引Google自然搜尋流量的其中一個重要因素。

如果你覺得本文章或影片有用,想再看更多我寫關於DIY網站開發,Google SEO內容的話,可以按下面的按鍵,填上你的電郵然後訂閱

作者 :- 香港全端網站開發人員,中文Google SEO顧問

其他文章

響應試網站開發課程入門

DIY網站開發初階自學課程橫額