2012-01-24 4 views
1

私たちはすべてのタイプの標準的な携帯電話に適したモバイルアプリケーションを作成する予定です。したがって、ブラウザで動作し、モバイルデバイスにインストールファイルがなく、MySQLサーバでWiFiに接続するため、ASPアプリケーションを選択します。さまざまなモバイルデバイスに適したASP Webアプリケーションフォームを作成するにはどうすればよいですか?

さまざまなモバイルデバイスに適したASP Webアプリケーションフォームの高さと幅のサイズを変更したいですか?

jquery mobileとcssをASP.netに含めることをお勧めしますか?貴重な提案をしてください。

答えて

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アプリケーション上でのモバイルサポートを実装しましたように私は、サブディレクトリ/モバイルでの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シートと浮動小数点ブロックを置き換えて、その位置はスタイルシートによって指示されます。

私はこれがあなたを邪魔するのを助けることを願っています。モバイルフレンドリーHTML/CSSレイアウトの

0

を見て持ち始めるが、Android上で少しslaggishすることができます。 ASP.NETインフラストラクチャのみを使用しますが、ViewStateコントロールと標準のASp.NETコントロールも使用できません。しかし、モバイル開発にとっては、より簡潔な制限です。

関連する問題