如何製作適用於不同移動設備的ASP Web應用程序表單？

Question

我們計劃開發適用於所有類型標準移動設備的移動應用程序。因此，我們選擇ASP應用程序，因爲它在瀏覽器中工作，在移動設備中沒有安裝文件，並通過MySQL服務器連接到WiFi。

我想調整的ASP Web應用程序窗體的高度和寬度適合於不同的移動設備？

一個朋友建議包括在ASP.net jQuery Mobile的和CSS？請給出您寶貴的建議。

Answer 1

這裏最簡單的方法是檢測瀏覽器是否爲移動設備或沒有，然後相應地選擇新的樣式表。

它可以得到相當涉及檢測所有不同的設備在那裏，他們的能力和所以最初我建議你只迎合少數的屏幕尺寸。

你可以把這樣的代碼中的Default.aspx

protected void Application_Start(object sender, EventArgs e) 
    { 
     // Redirect mobile users to the mobile site 
     HttpRequest httpRequest = HttpContext.Current.Request; 
     if (!httpRequest.Browser.IsMobileDevice) 
     { 
      string path = httpRequest.Url.PathAndQuery; 
      bool isOnMobilePage = path.StartsWith("/Mobile/", 
                StringComparison.OrdinalIgnoreCase); 
      if (!isOnMobilePage) 
      { 
       string redirectTo = "~/Mobile/"; 

       // Could also add special logic to redirect from certain 
       // recognised pages to the mobile equivalents of those 
       // pages (where they exist). For example, 
       // if (HttpContext.Current.Handler is UserRegistration) 
       //  redirectTo = "~/Mobile/Register.aspx"; 

       HttpContext.Current.Response.Redirect(redirectTo); 
      } 
     } 

    } 

在這裏，我在子目錄/移動複製的網頁，因爲我是執行對當前Web應用程序的移動支持。我知道重複的代碼，但這是最快的方式。

在我mobile.master頁我有以下幾點：

<link href="../Css/Mobile.css" rel="stylesheet" media="handheld" type="text/css" /> 
<link href="../Css/Mobile.css" rel="stylesheet" media="Screen" type="text/css" title="default"/> 
<link rel="alternate stylesheet" type="text/css" href="../Css/thin.css" title="thin"/> 
<link rel="alternate stylesheet" type="text/css" href="../Css/wide.css" title="wide"/> 
<link rel="alternate stylesheet" type="text/css" href="../Css/medium.css" title="medium"/> 

和

<script type='text/javascript' src='Javascript/resolution.js'></script> 

腳本本身（resolution.js）是：

function getBrowserWidth() { 
    if (window.innerWidth) { 
     return window.innerWidth; 
    } 
    else if (document.documentElement && document.documentElement.clientWidth != 0) { 
     return document.documentElement.clientWidth; 
    } 
    else if (document.body) { return document.body.clientWidth; } 
    return 0; 
} 


function dynamicLayout() { 
    var browserWidth = getBrowserWidth(); 

    //Load Thin CSS Rules 
    if (browserWidth < 640) { 
     changeLayout("thin"); 
    } 
    //Load Wide CSS Rules 
    if ((browserWidth >= 640) && (browserWidth <= 900)) { 
     changeLayout("medium"); 
    } 
    //Load Wider CSS Rules 
    if (browserWidth > 900) { 
     changeLayout("wide"); 
    } 
} 

function changeLayout(description) { 
    var i, a; 
    for (i = 0; (a = document.getElementsByTagName("link")[i]); i++) { 
     if (a.getAttribute("title") == description) { a.disabled = false; } 
     else if (a.getAttribute("title") != "default") { a.disabled = true; } 
    } 
} 

function addEvent(obj, type, fn) { 
    if (obj.addEventListener) { 
     obj.addEventListener(type, fn, false); 
    } 
    else if (obj.attachEvent) { 
     obj["e" + type + fn] = fn; 
     obj[type + fn] = function() { obj["e" + type + fn](window.event); } 
     obj.attachEvent("on" + type, obj[type + fn]); 
    } 
} 

addEvent(window, 'load', dynamicLayout); 
addEvent(window, 'resize', dynamicLayout); 

然後我有3個樣式表，薄的，中等和廣泛的被稱爲。對於那些可以處理標準瀏覽器大小的網頁的智能手機，將鏈接放回到全尺寸網頁是值得的。

樣式表不僅規定屏幕尺寸，但字體，顏色和項目的位置。

表格在這裏真的很痛苦，因爲它們調整不好。我用div和浮動塊替換了我的位置由樣式表規定。

我希望這可以幫助你走上正軌。

Answer 2

搜索移動友好的HTML/CSS佈局，開始在看看http://www.getskeleton.com

Answer 3

看看AMF: ASP.NET Mobile Framework 特別siutable爲iPhone/iPad平臺，但可以在Android上一點點slaggish。 僅使用ASP.NET基礎結構，但不允許使用ViewState和標準ASp.NET控件。但對於移動開發來說，這是一個更加方便的限制。