JuilinChungJuilinChung
智慧型手持裝置(手機、平板)已是非常普及的日常生活必需品。

所以現在,在開發系統時客戶都會詢問是否支援手機?或平板...(更早期其實還經歷過所謂的PDA版哩@@)

早期開發網站們會因應客戶的需求做個手機版網站讓手機在閱讀時讓使用者點擊手機版,或隨著時代技術變遷而演變成自動偵測使用者端是否使用手機而將系統導入手機版...

資訊的時代是永遠都在往前跑的,而現在的流行就是所謂的RWD適應性網頁設計...們的作法主要是利用CSS設定,讓網頁版面的寬度或內容可以依照設計者的設定,以不破版的方式呈現。

以innstory.com為例


使用電腦高解析度開啟網站時因為螢幕的寬度夠,所以可以看到完整的網站內容...


而當使用平板時,由於螢幕寬度變窄,這時可以選擇讓畫面裡的DIV自動適應寬度100%或者將一些DIV隱藏起來,達到想要的視覺效果


最後,當使用智慧型手機瀏覽網站時,一樣使用DIV適應或是隱藏的方式來顯示視覺效果...

CSS3 Media Query的設定方式如下
@media screen and (min-width: 768px) and (max-width: 979px) { /*如果使用者之視窗寬度介於 768px ~ 979px,將會再載入這裡的 CSS。*/ #demo{width:1200px} } @media screen and (max-width: 767px) { /*如果使用者之視窗寬度 <= 768px,將會再載入這裡的 CSS。 */ #demo{width:700px} } @media screen and (max-device-width: 480px) { /*如果使用者之裝置寬度 <= 480px,將會再載入這裡的 CSS。*/ #demo{width:100%} }
除了上述CSS3 Media Query的設定外,還有一個地方必須要設定,就是Viewport

如果網頁的標頭沒有做Viewport設定,手機將會以高解析度來呈現畫面,這將無法符合RWD的設計。

另外,若想知道自己的網站是否符合適應性設計,Google有一個線上行動裝置適用性測試..

https://www.google.com/webmasters/tools/mobile-friendly/

有興趣可以測看看。

台北市松山區八德路四段650號 Go

作者簡介

JuilinChung

我是chung

網路工作者

主業是網站系統開發建置

副業是做夢,寫故事

作品請參考 / teme.biz

做夢請參考 / innstory.com

聯絡 / chung.teme@gmail.com

訪客留言

留下一些足跡證明你來拜訪過我

推薦閱讀

作者其他相關類別故事

PHP使用GD函數切正方形圖像

PHP使用GD函數切正方形圖像

基本上大都是等比例將圖片上傳.... 但有時也會有需要正方形邊長的圖像需求 這時候還是...

PHP的日期時間相減方法之二

PHP的日期時間相減方法之二

這幾天很忙...忙著寫客戶的系統.. 忙到沒時間亂開其他網站... 忙到沒時間去研究新...

Apache無法執行.htaccess?

Apache無法執行.htaccess?

pexelsphoto 首先.htaccess是在Apache HTTP Server...

請選擇選項

執行錯誤

Hi,謝謝你的參與,但無法重複投票哦~