製作手機版網頁

建議解析度 480 X 640簡化內容

減少文字輸入部份
允許行動上網使用者儲存輸入的帳號密碼資訊
輸入的區塊盡量加以放大

行動定位:大部分的智慧裝置都有GPS或是定位的機制,可以讓客戶主動找到您的位置

行動聯繫:如果客戶使用的是行動電話,可以立即發話;如果是平板電腦,亦可以使用簡訊或是e-Mail的方式傳遞訊息給客戶

網頁的檔案大小,越小越好!但是呈現的畫面也要注意美觀。
在CSS3以及HTML 5的進步下,手機版的網頁可以做到很多視覺效果。

直式的網頁設計是目前的行動版網頁主流

按鈕要大一點,手指才好按

透過Server端的程式來作判斷,網頁會自動切換為手機版本

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"); //手機版
}
}

或是script判斷

<script type="text/javascript">

if ((navigator.userAgent.match(/iPhone/i)) ||
(navigator.userAgent.match(/Android/i)) ||
(navigator.userAgent.match(/iPod/i)))
(navigator.userAgent.match(/Windows Phone OS 7/i))
{
location.replace("mobile.aspx");
}

</script>

可以透過申請SDK的方式來測試,或使用各種不同的手機瀏覽模擬器,來驗證您的行動網頁是否符合手機與平板電腦平台

網頁版頭宣告

加在<html>上方
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

加在<head>~</head>之間
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

<部分內容取自網路>

與大家分享...
製作手機版網頁
Facebook
0製作手機版網頁
Google+
0製作手機版網頁
Pinterest
0製作手機版網頁
email
0 回復

發表評論

想要留言嗎?
歡迎歡迎!

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *