超酷的HTML5網站設計

我們已經瞭解很多關於HTML5的技術了，很多人也開始在自己的專案中應用各種HTML5技術。這裡，Design Art Wall收 集了15個採用HTML5實現的網站，當然它們還有非常贊的介面設計，這些網站不僅在coding上，更在設計上能給我們更多的參考，當然，國內很多網站 僅僅是使用了HTML5的doctype而沒有真正的採用HTML5的語義化標籤和更多高級特性。嗯，是時候做更多的嘗試了。
當然，如果你做了或者見到了很棒的採用HTML5技術實現的中文網站，歡迎通過評論回饋給我們，多謝～～

Youzee

Brasserie Gerard

Web Designer Wall

1MD

Simple as Milk

DBushell

Humaan

Florida After Seven

Free Agent Central

Our Swiss Life

Mighty in the Midwest

Dunnellon

Love of my life

New Adventures In Web Design

La gente ha dichosi

文章來自前端
文章提供:: BAYSTARS DESIGN網頁設計公司

如何讓網頁自動切換電腦或手機版

目 前用手機上網的人越來越多了！總不能為了手機專門設置一個網站吧！？最好的方式是知道使用者使用何種裝置上網，自動切換到適合網頁去！其實這需要透過 Server端的程式來作一點小判斷，就可以作到自動的切換，這邊整理一下手邊的資料， 分別針對PHP與ASPX作介紹。

PHP版本判斷：

程序代碼

$mobile_browser = '0';

if(preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
    $mobile_browser++;
}

if((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml')>0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) {
    $mobile_browser++;
}   

$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4));
$mobile_agents = array(
    'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
    'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
    'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
    'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
    'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
    'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
    'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
    'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
    'wapr','webc','winw','winw','xda','xda-','Googlebot-Mobile');

if(in_array($mobile_ua,$mobile_agents)) {
    $mobile_browser++;
}

if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini')>0) {
    $mobile_browser++;
}

if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows')>0) {
    $mobile_browser=0;
}

if($mobile_browser>0) {
    header("Location: mobile.php"); //手機版
}else {
    header("Location: pc.php");  //電腦版
}

ASPX版本判斷：

程序代碼

protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.Headers["user-agent"] != null && Request.Headers["user-agent"].ToLower().ToString().IndexOf("windows") != -1)
        {                       
            Response.Redirect("pc.aspx"); //電腦版
        }
        else
        {
            Response.Redirect("mobile.aspx"); //手機版
        }
    }

範例檔案下載...
解壓縮密碼：www.wowbox.com.tw
文章來自WOW
文章提供:: BAYSTARS DESIGN網頁設計公司

手機版網頁為何會放大呢？因為網頁檔頭宣告設定問題！

網 頁自動切換合適的網頁後，接下來就是要開始來製作手機版的網頁囉！手機或是電腦的網頁看起來是相同，只要電腦版能正常運作，在手機上應該都可正常預覽，如 果要專門讓手機來瀏覽時，這時就有點不太相同了，除了版面要另外設計外，還有一個相當重要的東西，那就是HTML檔頭的宣告，一般在設計網頁時，上面所宣 告的是給電腦版使用，目前大多使用XHTML的設定，若用此宣告放到手機版時，則會發現到怎網頁的版面都縮小，這是由於手機內建的瀏覽器，當網頁為電腦版 就會把版面撐到980像素，所以當要開始製作手機版網頁時，首先要做就是檔頭的宣告，這樣網頁在手機下，才能正常顯示手機版的尺寸大小。

宣告的部分有二種方式，一種是加在html上，另一種是加在~之間，二者取其一就行了，若要二邊都加的話也可以。

第一種方法、加在上方：

程序代碼

第二種方法、加在~之間：

程序代碼

完成這些動作後，再用手機瀏覽看看，這時版面就不會縮起來，就會依照手機的顯示尺寸，只要一個小動作卻有１８０度的大不同！要不然忌諱做出怪怪的手機專屬網頁喔！
文章提供:: BAYSTARS DESIGN網頁設計公司