• Artikel

Dieser Artikel wurde maschinell übersetzt.

Mobiles Browsen

Optimieren der Benutzererfahrung beim mobilen Browsen

Steven Sanderson

Die im Web über ein mobiles Gerät diesen Tagen zugreift? Im Jahr 2005, würden Sie die durchschnittlichen mobile Internet-Nutzer als ein geeky, wohlhabende Bewohner des Westens abgebildet haben – wahrscheinlich ein Softwareentwickler — wer würde nehmen Sie sich Zeit zum langsamen Datennetzwerk schmerzlich begrenzt Grasenerfahrung zu ertragen sein sperrige Handy herstellen — und Top-Dollar für das Privileg zahlen. Mit anderen Worten, ein Rand-Fall.

Jetzt hat mobiler Web-Zugriff in den globalen Mainstream sprunghaft angestiegen. Und ich meine nicht nur die Jugendliche, Studenten und ehemaliger Leute mit einander ihre Smartphones und Tablet-Geräte in jedem coffeeshop in Europa und Nordamerika. Heute gibt es rund 1 Milliarden aktiven mobilen Breitband-Abonnements, genug für einer von sieben Menschen auf dem Planeten (und nur zwei in sieben nutzen das Internet regelmäßig mit allen Mitteln). Mobile Geräte sind auf dem Weg, die einzigen häufigste Art innerhalb von fünf Jahren im Web zugänglich geworden. Schon in einigen der am schnellsten wachsende Länder — insbesondere Indien-Handys sind die einzige Möglichkeit für viele Menschen um online. Selbst in Amerika sagen 25 Prozent der mobilen Web-Nutzer, dass sie "nie" oder "selten" mit einen herkömmlichen PC im Internet zugreifen. (Informationsquellen, finden Sie unter "Mobile Web Access".)

Klar, wenn Sie eine öffentliche Website erstellen, müssen Sie denken über die Unterstützung von mobiler Browsers.

Warum unterscheidet mobilen Surfen

Wie Sie wissen, unterstützt fast jeder mobiler Browser irgendeine Form von HTML. Viele, vor allem auf High-End-Geräten wie iPhones und Windows Telefon 7, unterstützen die neuesten HTML, CSS und JavaScript-Standards und Rendern pixelgenaue Kopien von was Sie in einem herkömmlichen PC-Browser sehen würde.

Die billigste Option für die Unterstützung von mobiler Browsers ist, nichts zu tun. Sie können nur dienen die gleichen Desktop-orientierten Seiten für alle Geräte und mobile Browsern, behandeln sie Vertrauen. Aber die Wahl dieser Option führt zu einer sehr schlechten mobile-Browser-Erfahrung, aus mehreren Gründen:

  • Handy-Bildschirme sind klein. Einige mobile Browser wie Opera Mini, behandeln Desktop-Breite Seiten durch dynamisch neu formatierend die Seitenlayout und Stile. Die sich daraus ergebende Darstellung ist selten, was Ihre Designer im Sinn hatte. Andere mobile Browser wie Safari für iPhone oder Internet Explorer für Windows Phone 7 Desktop-Breite Seiten Rendern und erzwingen Sie dann den Benutzer ein-und Auszoomen und pan rund um den Text zu lesen. Dies ist ein Test für Ihre Besucher Geduld.
  • Mobile Datennetze sind oft langsam. Gehen Sie nicht davon aus, dass Ihre Besucher die gleiche Bandbreite als Festnetz-Breitband-Nutzer haben. Sie können sogar von Megabyte, Zahlen werden, so dass Schwergewichts-Websites nicht beliebt.
  • Mobile Geräte haben nicht oft eine Maus- oder Tastaturaktion. Vertraute desktop-Benutzer-Interaktion Mechanismen sinnvoll nicht immer auf mobilen Geräten. Beispielsweise durch Klicken auf Schaltflächen oder kleine Links möglicherweise schwierig und fehleranfällig auf Touch-orientierten Geräten, und das Konzept der "schwebt" noch nicht vorhanden.

Also, wenn Sie einen erstklassigen mobilen Browsen-Erfahrung bereitstellen möchten, ist es Zeit Ihre technischen Fähigkeiten anwenden und die Unterschiede zwischen großen Gerätetypen entfallen.

Mobile-Unterstützung in ASP.NET

Es gibt zwei Hauptaspekte mobile Browsern unterstützt:

  1. Erkennen, welche Art von Gerät ein bestimmten Besucher verwendet wird. ASP.NET verfügt über integrierte Unterstützung für Browser-Erkennung. Im nächsten Abschnitt werde ich prüfen, diesen Mechanismus, und wie er angepasst und erweitert werden kann.
  2. Erzeugen, die gut auf die erkanntes Gerät funktioniert. Wenn Sie zurück durch die vorhergehenden Liste der Herausforderungen Scannen, werden Sie erkennen, dass diese Dinge sind nicht, die Ihre Technologie-
platform automatisch verarbeiten kann. Mobile-Unterstützung ist in erster Linie eine Frage der User Experience (UX) Design, nicht vor allem um Markup. Später in diesem Artikel werden technische Mittel, um verschiedene Ausgänge für verschiedene Geräte produzieren beschrieben, aber es ist noch bis zu Sie entwerfen und Implementieren von verschiedenen Layouts und Benutzer Workflows für Handys.

Beachten Sie, dass bis um ASP.NET 2.0, veröffentlicht im Jahr 2005 war Ausgabe auf mobilen Geräten arbeiten zu erstellen eine Frage der Markup, da gemeinsame Geräte damals Spezialist Protokolle und Markup-Sprachen, einschließlich WAP, WML- und cHTML verwendet. ASP.NET 2.0 enthaltene "Mobile Steuerelemente" um diese Formate zu unterstützen. Diese Formate sind jedoch jetzt völlig obsolet, da alle mainstream Browser HTML, so jetzt verwenden der ASP.NET Mobile-Steuerelemente sind auch veraltet.

Browsererkennung

Der Kern ASP.NET-Plattform, die Web Forms und Model-View-Controller (MVC) unterstützt, verfügt über integrierte Unterstützung für Browser-Erkennung. Sie können herausfinden, ob ein Besucher einen mobilen Browser mithilfe der Request.Browser.IsMobileDevice Boolean-Eigenschaft verwendet. Jedoch sollten Sie verstehen, wie diese Erkennung funktioniert Genauigkeit Einschränkungen beachten, die Sie betreffen.

ASP.NET bestimmt, welche Art von Browser eine Anforderung macht und welche Funktionen dieser Browser verfügt (Bildschirmgröße, JavaScript-Unterstützung, usw.) durch den Vergleich der eingehenden Anforderung UserAgent-Header Zeichenfolge gegen eine Reihe von regulären Ausdrücken in XML-Dateien, die gängigen Browsern zu beschreiben.

Diese reguläre Ausdrücke — und Informationen über entsprechende Gerätefunktionen — werden in eine Reihe von Browser-Dateien im Ordner C:\Windows\Microsoft.NET\Framework\v4.0.30319\Config\Browsers (oder Ihrer Installation Äquivalent) gespeichert. Die standard-iphone.browser-Datei enthält z. B. den Code in Abbildung 1.

Abbildung 1 iphone.browser Datei

<browsers>
  <!-- Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ 
       (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3 -->
  <gateway id="IPhone" parentID="Safari">
    <identification>
      <userAgent match="iPhone" />
    </identification>
    <capabilities>
      <capability name="mobileDeviceModel" value="IPhone" />
      <capability name="mobileDeviceManufacturer" value="Apple" />
      <capability name="isMobileDevice" value="true" />
      <capability name="canInitiateVoiceCall" value="true" />
    </capabilities>
  </gateway>
  ...
</browsers>

In der Datei definiert das folgende Element den regulären Ausdruck zum eingehenden UserAgent-Header-Zeichenfolgen verglichen werden:

<userAgent match="iPhone" />

Sobald das System einen passenden UserAgent regulären Ausdruck findet, gibt der Rest der XML-Daten den Typ und die Funktionen des Geräts.

Die Einschränkung dieses Systems ist klar: Es kann nur ermitteln, mobile Geräte, die bekannt und beschrieben wurden in diesen Dateien, wenn ASP.NET 4.0 wurde erstmals veröffentlicht. Leider ist dies nicht gemeinsame modernen Browsern wie Opera Mobile oder den Standardbrowser für Google Android enthalten. Request.Browser.IsMobileDevice wird nicht korrekt auf False für diese Browser festgelegt werden.

Anpassen und Verbesserung der Browsererkennung

Sie haben zwei Hauptoptionen für die Überwindung der Einschränkungen der Standard-Browser-Erkennung-Anlage:

  1. Sie können Ihre eigenen Browser-Dateien zur Darstellung von neuerer Geräten bereitstellen.
  2. Sie können eine Drittanbieter-Browsererkennung-Bibliothek verwenden.

Die erste Option können Sie ziehen, mit der rechten Maustaste auf den Projektnamen im Visual Studio-Projektmappen-Explorer und wählen Sie hinzufügen | Hinzufügen von ASP.NET-Ordner hinzufügen | App_Browsers. Sie können dann die Browser-Dateien in diesen Ordner hinzufügen; z. B. indem Sie eine vorhandene Datei aus dem C:\Windows\Microsoft.NET\Framework\v4.0.30319\Config\Browsers-Ordner kopieren und bearbeiten dann die Identifikation reguläre Ausdruck und Gerät Fähigkeit Beschreibung den gewünschten Browser dargestellt.

Wenn Sie nicht, für die Verfolgung verantwortlich möchten neu veröffentlicht alle Hunderte von mobile Browsern und Ihre Browser-Dateien aktuell gehalten, Sie können nehmen Sie die zweite Option und eine Drittanbieter-Browsererkennung-Bibliothek verwenden.

Derzeit ist die, die ich empfehle bin 51degrees.Mobi-Stiftung, eine open-Source (MPL Lizenz)-Bibliothek gehostet auf CodePlex bei 51degrees.codeplex.com. Diese Bibliothek verwendet keine Browser-Dateien. Stattdessen wird die Geräte identifiziert, indem sie gegen die Universal-Ressource-Datei (WÜRFL) Wireless-Datenbank, die verwendete Gratis, kostenlos in beiden kommerziellen und nicht kommerziellen Anwendungen werden kann. Weitere Informationen zu WÜRFL, finden Sie unter wurfl.sourceforge.net.

Die einfachste Möglichkeit, 51degrees zu installieren.Mobi-Stiftung in Web Forms oder MVC-Projekte ist mit den NuGet-Paket-Manager. Wenn Sie ASP.NET MVC 3, haben Sie bereits NuGet. Wenn dies nicht der Fall ist, können Sie die Visual Studio-Erweiterungs-Manager (es ist im Menü Extras) zu suchen und installieren NuGet. Nachdem Sie NuGet haben, gehen Sie auf Extras | Bibliothek-Paket-Manager | Paket-Manager-Konsole und dann den folgenden Befehl in der Konsole ausgeben:

Install-Paket 51Degrees.mobi

Dadurch wird dem Projekt hinzugefügt:

  • Eine neue Version der Datenbank WÜRFL zu Ihrem Projekt auf /App_Data/wurfl.xml.gz
  • Ein Verweis auf FiftyOne.Foundation.dll, die Bibliothek Hauptassembly
  • Web.config-Einträge 51degrees aktivieren.Mobi-Stiftung

51degrees.Mobi Foundation einstecken, und verbessert die ASP.NET standard Request.Browser-API. Bei einem das Paket installiert, erhalten viel genauere Ergebnisse von Request.Browser.IsMobileDevice, Sie da neuere Versionen der Datenbank WÜRFL heutigen gemeinsamen mobilen Browsern, einschließlich Opera Mobile und den Google Android Browser erkennen können.

Beachten Sie, dass die Standard-51degrees.Mobi Foundation Web.config-Einstellungen auch konfigurieren, damit alle Anforderungen von mobilen Browsern auf die URL umzuleiten ~ / Mobile/Default.aspx. In vielen Fällen – und vor allem für ASP.NET MVC-Anwendungen —, die nicht das gewünschte Verhalten sein. Sie können die Umleitung von kommentieren Out oder löschen deaktivieren der <redirect/> Element, das das Paket Ihrer Web.config-Datei, und dann Sie hinzufügt können auch die /Mobile/Default.aspx-Datei löschen, wenn Sie möchten.

Styling für Mobiles

Jetzt haben Sie eine Vorstellung davon, wie mobile Browser zuverlässig erkannt, zeige ich eine wichtige Möglichkeit zur Kontrolle wie Seiten von mobile Browser gerendert werden. Danach werde ich einige architektonischen Optionen für unterschiedliche gerenderte Markup von Device-Typ beschreiben.

Viele moderne mobile Browsern, einschließlich Safari für iOS und Internet Explorer für Windows Phone 7 versuchen, machen gerendert Seiten Blick gerade wie auf einem Desktopbrowser. Sie wissen, dass die meisten Seiten für rund 1.000 Pixel breit und der Designer hat wahrscheinlich nicht entfielen viel kleiner breite Bildschirme ausgerichtet sind.

Um dies zu beheben, machen sie in der Regel die Seite auf einer virtuellen Leinwand, bekannt als ein "Ansicht", in der Regel rund 1.000 virtuelle Pixel breit. Der Browser kann dann die visuelle Anzeige von diesem virtuellen Leinwand willkürlich, Skalieren so dass der Benutzer ein-und Zoomen und Schwenken um. Diese Anordnung wird illustriert, Abbildung 2.

A Mobile Browser Rendering a Desktop-Width Page onto a Virtual Viewport

Abbildung 2 A Mobile Browser rendern eine Desktop-breite-Seite auf einem virtuellen Darstellungsbereich

Während dadurch die Seite als die Designer bestimmt Rendern leidet es erhebliche Usability-Nachteil, wenn der Benutzer ausreichend gezoomt ist den Text zu lesen, er nicht, die gesamte Breite der Seite sehen kann und muss dazu horizontaler Bildlauf.

Steuern der Breite für den Darstellungsbereich

Wenn Sie tatsächlich Seiten für den kleinen Bildschirm entworfen haben, wird nicht auf eine virtuelle Viewport rund 1.000 Pixel breit angeordnet werden sollen. Stattdessen sollten Sie Ihre Seiten angeordnet werden auf einen Viewport, der die gleiche Breite wie die tatsächliche Bildschirm ist so, dass es ordentlich horizontal passt mit keine Zoomen erforderlich.

Viele der beliebtesten mobilen Browser unterstützen einen nicht dem Standard entsprechende "Ansicht"-Meta-Tag, der Sie die Breite des virtuellen Viewports steuern kann. Beispielsweise, wenn Sie die folgenden auf Ihre Seite <head> hinzufügen Abschnitt, wird der Browser die Seite auf einem Darstellungsbereich 320 Pixel breit anzuordnen:

    <meta name="viewport" content="width=320"/>

Dies ist in der Regel eine viel bessere Passform für Mobiltelefone.

Denken Sie daran, dass einige mobile Geräte verfügen über Bildschirme mit viel höhere horizontale Auflösung. Beispielsweise hat das iPhone 4 640 physischen Pixel pro Zeile. Jedoch ist es noch sinnvoll, eine virtuelle Ansicht des rund 320 Pixel verwenden; Andernfalls wird der resultierende Text zu klein, ohne Einzoomen zu lesen sein.

Wenn Sie möchten, können Sie virtuellen Viewport variieren in der Größe entsprechend das Gerät verwendet wird, mit der folgenden Syntax:

    <meta name="viewport" content="width=device-width"/>

Beachten Sie, dass einige mobile Geräte wird nicht Sie eine wörtliche Gerät-Breite geben. Sie interpretieren "Gerät-Breite" als was bedeutet "die virtuelle Viewport-Breite, die der Hersteller meint das angenehme Ergebnis gibt." So definiert beispielsweise iPhone 4 Gerät-Breite als 320 Pixel, trotz seiner höheren physikalischen Auflösung.

Markup-Empfehlungen

Immer wenn sind Sie Seiten für mobile Browser entwerfen:

  • Verwenden Sie die Viewport-Meta-Tag um Viewport die horizontale Breite des Bildschirms passen.
  • Passen Sie Ihre Seiten-Layouts, CSS-Stile und dergleichen um diese engen Breite zu berücksichtigen. Wenn Besucher zoom oder horizontaler Bildlauf benötigen, Ihre Seite fühlt sich eher wie eine native Anwendung für ihr Gerät — ein weit besseres Erlebnis.
  • Stellen Sie sicher, dass Ihre Links und Schaltflächen groß genug, um ungenau abgehört werden. Fingerspitzen sind viel größer als die Spitze des ein Mauszeiger.
  • Minimieren Sie Anforderungen an die Bandbreite nicht mit sehr hochauflösende Bilder oder massive JavaScript-Dateien.

Architektonische Optionen

Sie haben gesehen, wie man mobile Browser erkennen, und ich habe einige Empfehlungen für Markup, das besser ihnen passt bereitgestellt. Jetzt werde ich drei einfache Optionen zur Strukturierung der Anwendung für verschiedene Ausgabe für verschiedenen Browser-Typen beschreiben:

  1. Ein- und Ausblenden von für die Markupabschnitte je nach Browsertyp.
  2. Schalten Masterseiten je nach Browsertyp.
  3. Anzeige der ganz anderen Inhalte je nach Browsertyp.

Jede dieser hat seine Vorteile und Einschränkungen, so es an Ihnen ist, einen Ansatz zu wählen, der Ihren Anforderungen entspricht.

Ein- und Ausblenden von Markup

Wenn Sie müssen nur ein- oder Ausschließen von Meta-Tags und CSS Dateiverweise je nach Browser-Typ, ist dies sehr einfach. Beispielsweise können in einer Web Forms-Masterseite Sie eine "if"-Anweisung innerhalb Ihrer <head> hinzufügen Abschnitt:

    <head runat="server">
      <title>My site</title>
      <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    
      <% if (Request.Browser.IsMobileDevice) { %>
        <meta name="viewport" content="width=device-width"/>
        <link href="~/Styles/MobileSite.css" rel="stylesheet" type="text/css" />
      <% } %>
    </head>

Die Entsprechung für ein Razor-Layout für eine ASP.NET MVC-3-Anwendung sieht folgendermaßen aus:

    <head>
      <title>@ViewBag.Title</title>
      <link href="@Url.Content(
        "~/Content/Site.css")" rel="stylesheet" type="text/css" />
      @if (Request.Browser.IsMobileDevice) {
        <meta name="viewport" content="width=device-width"/>
        <link href="@Url.Content(
          "~/Styles/MobileSite.css")" rel="stylesheet" type="text/css" />
        }
    </head>

Dies ist eine sehr grundlegende Technik, aber es kann angemessen sein, wenn Sie Ihre vorhandene Markup zu den kleinen Bildschirm passen rein durch Hinzufügen zusätzliche CSS-Regeln in einer separaten Datei MobileStyles.css anpassen können. Den gleichen Mechanismus an anderer Stelle in Ihrem Masterseiten und Ansichten können Sie natürlich, Ausgabe vom Browsertyp ändern.

Diese Technik funktioniert am besten, wenn Sie eine völlig neue Website bauen und seine Markup so entwerfen können, dass es passt desktop und mobile Bildschirme, die nur abhängig von der CSS verwendet. In diesem Fall ist der zusätzliche Aufwand sehr niedrig. Für viele Standorte dieses einfache Technik wird nicht ausreichen, aber es gibt zwei Alternativen: Wechseln der Masterseite oder Anzeige der verschiedenen Inhalte.

Masterseiten umschalten

Sie können möglicherweise zu halten Ihre vorhandenen Content-Seiten nicht geändert, und nur das Layout für den kleinen Bildschirm mit einem anderen Masterseite oder Layout anzupassen. Wenn Sie eine Web Forms-Anwendung erstellen, konnte Sie beispielsweise eine Standardseite-Basisklasse definieren, die seine master-Seite dynamisch wechselt:

public class PageBase : Page
    {
      protected override void OnPreInit(EventArgs e)
      {
        if (Request.Browser.IsMobileDevice)
            MasterPageFile = "~/Mobile.Master";
      }
    }

Legen Sie anschließend für jede Seite, deren Layout nach Gerätetyp je sollte, seiner Codebehind-Klasse von PageBase anstelle von den üblichen System.Web.UI.Page erben. Anschließend können Sie erstellen eine Masterseite auf /Mobile.Master deren Layout und CSS-styling für mobile mühelos optimiert sind.

Es ist auch leichter für ASP.NET MVC 3 Entwickler mit Razor Layouts – können Sie alle Ihre Ansichten-Switch-Layouts dynamisch durch Bearbeiten der /Views/Shared/_Layout.cshtml-Datei Folgendes enthalten:

@{
  Layout = Request.Browser.IsMobileDevice 
             ? "
~/Views/Shared/_MobileLayout.cshtml"
             : "~/Views/Shared/_Layout.cshtml";
}

Dann fügen Sie eine neue Razor-Layout-Datei am /Views/Shared/_MobileLayout.cshtml, und ändern Sie ihre Struktur und CSS-Stile auf das mobile Gerät zu entsprechen, wie Sie wollen.

Dies bietet mehr Flexibilität als die vorherigen Technik unterschiedlicher CSS und gelegentliche Markup Segmente allein, aber immer noch die Einschränkung auf, die sowohl desktop- und mobile-Seiten müssen im Wesentlichen die gleiche Informationen anzeigen und verwenden die gleichen Interaktion-Mechanismen.

Anzeige der verschiedenen Inhalte

Bei einigen Anwendungen wird nicht Sie Ihre desktop-Seiten an mobile Geräte nur mit verschiedenen CSS oder Masterseiten und Layouts, weil anpassen anpassen können:

  • Ihre geschäftlichen Anforderungen möglicherweise zu hoch. Wenn Sie eine wirklich geschniegelte bewegliche Erfahrung möchten, müssen Sie verschiedenen (vielleicht weniger) Informationen an mobile Geräte anzeigen und möglicherweise führen den Benutzer durch unterschiedliche Workflows. Beispielsweise kann Ihre Benutzer-Registrierungsprozess haben weniger Schritte und weniger Informationen für mobilen Besuchern zu sammeln. Dies ist mehr als eine Frage der CSS.
  • Sie können mit Legacycode arbeiten, die nicht so Veränderung zugänglich ist. Beispielsweise kann Ihre vorhandene Markup hartkodierte Elementgrößen und Stile enthalten. Ändern dies mithilfe von CSS oder eine andere Masterseite möglicherweise unmöglich, oder könnte gerade machen Dinge komplizierter und weniger verwaltet werden können.

In beiden Fällen ist die ultimative Lösung vollkommen getrenntes Logik und Markup für verschiedene Gerätetypen verwenden. Der Nachteil ist, dass Sie dann zwei Versionen haben beibehalten, aber der wichtigste Vorteil ist, dass das Verhalten der beiden unabhängig voneinander in irgendeiner Weise variieren können Sie die gewünschte. Für Web Forms-Entwickler die Implementierung ist in der Regel eine Reihe von Mobilität bezogene ASPX-Seiten und für MVC-Entwickler in der Regel bedeutet einen neuen Bereich für Mobilität bezogene Controller und Ansichten erstellen. In beiden Fällen müssen Sie einige Logik ankommende Besucher auf die richtige Seite je nach ihren Gerätetyp umleiten.

Code-Beispiele zeigt Wege zur Umleitung Logik in einer Weise zu implementieren, ist kompatibel mit beiden Ausgabezwischenspeicherung und bildet Authentifizierung auf Web Forms und MVC, finden Sie im Whitepaper unter bit.ly/gHT3Ap.

Schlussfolgerungen und abschließende Empfehlungen

In diesem Artikel haben Sie gelernt, über:

  • Warum werden mobile Browser immer wichtiger.
  • Warum ist die großer mobiler-Unterstützung in erster Linie eine Frage der UX-Entwurf, nicht nur verschiedene Markup.
  • Wie der Kern ASP.NET-Plattform erkennt mobile Browser standardmäßig.
  • Wie der Standard-Browser-Erkennung-Ansatz ist beschränkt, und wie Sie erweitern oder ersetzen Sie sie.
  • Wie mobile Browser Display Desktop-Größe Seiten auf kleinen Bildschirmen und wie Sie, beeinflussen können.
  • Architektonische Optionen zum Senden von verschiedene Ausgabeformate an verschiedenen Browser-Typen.

Auswählen der eine Kombination von Techniken, um am besten zu Ihrer Anwendung und Endbenutzer passen meine Top-Empfehlungen sind priorisierenUsability und testen es. Es hat keinen Sinn, die mobile-Unterstützung implementieren, wenn es den Benutzern eine schlechtere Browser-Erfahrung endet! Hier sind einige Dinge zu beachten:

Angebot mobile Benutzer a Weg zurück zu den Standard-desktop-Ansicht zu wechseln. In der Regel bedeutet dies, Anbringung eines Links oben auf Ihre Seiten zu sagen "Wechseln Sie zum desktop-Anzeige." Die Art und Weise, die der Switch implementiert ist, hängt von Ihrer Architektur; Es kann einfach mit der desktop-Version von einem bestimmten URL verknüpfen, oder sie können einen Cookie, der normale Browsererkennung Mechanismus überschreibt festgelegt.

Diese Einrichtung ist besonders wichtig, wenn Ihre mobilen Seiten weniger Informationen als Ihre desktop-Seiten zeigen, weil Hauptbenutzer frustriert, wenn sie keinen Zugriff auf Informationen oder Funktionen, die sie wissen sollte es sein werden.

Don't lose Informationen beim Umleiten zu einer mobilen Ansicht. Auf einigen Websites werden eingehende mobile Besuchern zur mobilen Homepage, egal von welcher Seite umgeleitet, die sie angefordert wurden. Dies ist sehr frustrierend für Benutzer und fast jeder eingehenden Link im wesentlichen bricht. Wenn Sie nicht haben eine mobile Version der Seite angefordert wird, zeigen Sie einfach die desktop-Version von es.

Überprüfen Sie Ihre Implementierung mit tatsächlichen Geräten und -Emulatoren. Ihre Handy-freundliche-Layouts, CSS und Meta-Tags können nicht verarbeitet werden, wie Sie von allen Geräten erwarten. Sie müssen unter tatsächlichen Geräten und -Emulatoren testen. Eine Liste von Emulatoren für beliebte mobile Geräte finden Sie unter asp.net/mobile/device-simulators.

Es ist OK, um kleine. starten Müssen Sie eine Handy-optimierte Version von jeder Seite und Funktion gleichzeitig auf Ihrer gesamten Website erstellen möchten. Für viele Unternehmen kommen die meisten des Werts vom haben eine Mobile-fähigen Homepage, und vielleicht ein paar andere Schlüsselbenutzers Workflows wie Registrierung und Katalog durchsuchen.

Für einige Intranet-Anwendungen kann es nie für mobile Geräte unterstützen relevant sein. Aber für alle öffentlichen Internetwebsite, müssen Sie fast sicher, mobile Browser zu betrachten, wenn Sie in den kommenden Jahren relevant bleiben sollen.

Hinweis: Als Alternative zu 51degrees.Mobi-Stiftung, eine weitere Option zur Verwendung WÜRFL Daten in ASP.NET-Anwendungen ist über die offizielle WÜRFL.NET-API, abrufbar unter http://wurfl.sourceforge.net/dotNet und auf NuGet als ein Paket namens "Wurfl_official_api".

API unter AGPL und kommerziellen Lizenzen verfügbar ist (siehe http://www.scientiamobile.com).

Steven Sanderson arbeitet für Microsoft als Programmmanager im Team, das Ihnen ASP stellt.NET MVC, Web Forms, NuGet und andere webbezogene Güte.

Dank der folgenden technischen Experten für die Überprüfung dieses Artikels: Scott Hunter