Skip to content

Zeroplex 生活隨筆

軟體開發、伺服器和生活瑣事

小 縮小字型大小。 中 重設字型大小。 大 放大字型大小。

建立供行動裝置使用的網頁瀏覽界面

Posted on 2017 年 10 月 11 日2021 年 3 月 12 日 By 日落 在〈建立供行動裝置使用的網頁瀏覽界面〉中尚無留言

最近用手機追新聞有感,分享一下心得。

由於行動裝置的使用量漸漸超越了桌上型電腦,而行動裝置為了攜帶方便體積本身就小,連帶的螢幕也較桌上型電腦小很多,因此不少網路服務也跟著建立行動裝置專用的網頁,像是自由時報就有針對行動裝置客製化網頁:

自由時報截圖

有留意的話可以發現行動版網頁的網址和供一般電腦瀏覽的網址是不一樣的,如了全幅廣告不說,網頁寬度、排版方式都看電腦版不同。

這時如果覺得文章不錯,透過行動裝置分享道社交平台上,別人如果是使用電腦開啟時,則會出現這樣的畫面:

別人就會變成使用超大螢幕來看超小版面的新聞,而且還有全幅蓋版廣告喔 XD

如果有 sense 一點的人,可能會想試著把網址「http://m.ltn.com.tw」改成「http://www.ltn.com.tw」嘗試開啟一般網頁版來閱讀,可惜自由時報沒有這個設計,改完網址只會顯示 404 找不到網頁 (但蘋果日報將網址改為 www 開頭以後是可以正常瀏覽的,這個設計頗為貼心)。

那什麼樣的設計才能同時滿足行動裝置以及一般電腦呢?可以參考 Wikipedia。

Wikipedia 使用 Responsive Web Design (RWD) 來讓瀏覽器自動判斷裝置、螢幕大小,並自動更換成適合閱讀的版面。即使網址相同,在不同裝置上可以呈現不同的畫面,讓使用者方便閱讀。

只是一自己的經驗,要設計一個讓不同行動裝置都可以正常瀏覽、顯示符合需求的 CSS,費工又費時,就看業者到底想要給使用者什麼樣的體驗了。

Tags:分享, 資訊學習

文章導覽

Previous Post: PHP curl 的一些特性
Next Post: WPA2 金鑰交換協議問題導致的安全漏洞

發佈留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *


其他

關於我  (About me)

小額贊助

  文章 RSS Feed

  留言 RSS Feed

Apache AWS Bash C/C++ Docker FreeBSD GCP Git Google Java JavaScript Laravel Linux Microsoft MSSQL MySQL Nginx PHP PHPUnit PostgreSQL Python Qt Ubuntu Unix Vim Web Windows WordPress XD 作業系統 分享 好站推薦 專題 攝影 新奇搞笑 新聞 旅遊 生活雜記 程式設計 網路架站 網頁設計 資訊學習 資訊安全 遊戲 音樂


創用 CC 授權條款
本著作係採用創用 CC 姓名標示-相同方式分享 4.0 國際 授權條款授權.