現在做網站不只要兼顧電腦, 還要兼顧平板跟手機. 那為了解決這個問題有兩個方法, Responsive Web Design (RWD) 或 獨立的手機網頁(譬如m.youtube.com)

稱適應性網頁 Responsive Web Design (RWD)

首先What is RWD? RWD是用CSS 把網站縮小或變大. 所以css會依照瀏覽器的寬度來執行那個寬度的CSS. 所以你的網站會在所有設備都很好看. 那就RWD 網站就一定要用css media query. 基本上以下是我個人會用的media query, 歡迎大家來用(其實我好像也是抄bootstrap)

/* Big Tablet to 1200px (width smaller than 1140px row */
@media only screen and (max-width: 1200px) {}
 
/* Small Tablet to Big Tablet from 768 to 1023px */
@media only screen and (max-width: 1023px) {}
 
/* Small Phones to small Tablet 481-767px(Ipad) */
@media only screen and (max-width: 767px) {}
 
/* Small Phones 0 to 480px(Iphone) */
@media only screen and (max-width: 480px) {}

Adaptive Design

那你會覺得說有RWD就好了幹嘛要獨立做一個mobile網頁 這個是因為如果網站功能很多的話RWD有時候不好維護. 比如說, 架設你的網站有一個很長的清單, 你電腦版是用切頁來區隔手機板是用無限滾動 或者架設你的連結點下去電腦版是彈窗, 手機板是換頁. 這時候如果用RWD, 你就會發現

所以這個時候我就會建議做一個獨立的手機網頁.

像youtube, facebook 就是有獨立的手機網頁, 不然功能太多了

以下我來分享一個簡單javascript的方法來做獨立的手機網頁. 如果監測到screen 寬度低於699 就換到mobile.html

<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "mobile.html";
}
//-->
</script>

參考文件

• mobile vs desktop web traffic

• w3c html responsive