網(wǎng)站的手機(jī)和 PC站要采用什么設(shè)計(jì)？
時(shí)間：2023-05-16 14:21:02 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-05-16 14:21:02 來源：網(wǎng)站運(yùn)營
網(wǎng)站的手機(jī)和 PC站要采用什么設(shè)計(jì)？：網(wǎng)站的手機(jī)站和 pc 站應(yīng)該采用不同的 URL 還是相同的 URL？為什么？
—— 應(yīng)該采用相同的 URL.
手機(jī)站和 PC 站的設(shè)計(jì)模式一般有如下 3 點(diǎn)
[1]：
- 1、響應(yīng)式設(shè)計(jì)（Responsive Design）：
PC 站和移動(dòng)站的 URL 是完全一樣的（不管用什么設(shè)備訪問都一樣），返回給瀏覽器的 HTML 代碼也是一樣的，不同寬度的屏幕排版不同是通過 CSS 控制的。以前也經(jīng)常稱為自適應(yīng)設(shè)計(jì)，就是因?yàn)榕虐媸歉鶕?jù)屏幕寬度自動(dòng)適應(yīng)的。
優(yōu)點(diǎn)：代碼有利于維護(hù)、可以隨時(shí)適應(yīng)不同的分辨率。
- 2、動(dòng)態(tài)服務(wù)（Dynamic Serving）：
PC 站和移動(dòng)站的 URL 是完全一樣的，這點(diǎn)和響應(yīng)式設(shè)計(jì)相同，但動(dòng)態(tài)服務(wù)方式返回給瀏覽器的HTML 代碼（以及 CSS）是不一樣的，PC 設(shè)備訪問網(wǎng)站，得到的 HTML 及 CSS 代碼是 PC 版，而移動(dòng)設(shè)備得到的 HTML 與 CSS 代碼是專門做了移動(dòng)優(yōu)化的移動(dòng)版本。
缺點(diǎn)：不能隨時(shí)適應(yīng)不同的分辨率，代碼維護(hù)困難。
- 3、獨(dú)立移動(dòng)站（Separate Mobile Site） ：
移動(dòng)站的URL和PC站是不一樣的，通常用單獨(dú)的子域名，比如PC站是
www.fuyeor.com ，而移動(dòng)站則是
mobile.fuyeor.com 。當(dāng)然，移動(dòng)站的 HTML 代碼（以及 CSS）與 PC 站也是不一樣的，是專門做了移動(dòng)優(yōu)化的。換句話說：這種方式下移動(dòng)站就是個(gè)獨(dú)立的網(wǎng)站，相當(dāng)于 PC 網(wǎng)站換皮。
缺點(diǎn)：不能隨時(shí)適應(yīng)不同的分辨率，代碼維護(hù)困難（需要維護(hù)兩套代碼以及相互跳轉(zhuǎn)），容易造成網(wǎng)站內(nèi)容重復(fù)。
“響應(yīng)式設(shè)計(jì)”最好
目前，獨(dú)立移動(dòng)站的落后方式已經(jīng)漸漸被淘汰，而動(dòng)態(tài)服務(wù)由于成本和代碼的維護(hù)性不好也鮮有人采用?，F(xiàn)在大都使用“響應(yīng)式設(shè)計(jì)”，即用 CSS 的 @media 查詢屬性適配不同分辨率，這樣不會(huì)造成網(wǎng)站重復(fù)、代碼有利于維護(hù)、可以隨時(shí)適應(yīng)不同的分辨率。
參考
- ^網(wǎng)站的手機(jī)站和 PC 站應(yīng)該采用什么樣的設(shè)計(jì)？?https://docs.fuyeor.com/question/11930
在線咨詢
