モバイルおよびデスクトップ開発用の 1 つまたは個別のサイトの使用
Use responsive CSS if possible.
I've been spending time looking at the ongoing battles between developers over one of the fundamental headaches of web design, should you build separate sites for mobile devices and desktop computers. Some of the changes that Google have introduced like syncing your bookmarks for the IPhone and Chrome are really useful, this has led me to the single site conclusion, but a lot the code below could be used to redirect to a seperate site.
The site should be easy enough to use on either, while you can turn some things on or off with some simple detection.
There is also a cookie stored on the users device that remembers the last option selected.
This is what the detection does on this site. It is a simple dropdown with three options; Desktop, Apple and Mobile. There is also a dual menu system, which offers a simplified breadcrumb for the user as well.
HTML
<asp:DropDownList ID="SelDevice" runat="server" ClientIDMode="Static" Width="100px" AutoPostBack="True">
<asp:ListItem>Desktop</asp:ListItem>
<asp:ListItem>Apple</asp:ListItem>
<asp:ListItem>Mobile</asp:ListItem>
</asp:DropDownList>
<div id="SubMenu">
<div id="Current" runat="server" clientidmode="Static"></div>
<div id="SubMenuList" runat="server" clientidmode="Static"></div>
</div>
VB
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Session("View") Is Nothing Then If Request.Cookies("ViewType") Is Nothing Then If Request.Browser.IsMobileDevice = True Then Dim ua As String = Request.UserAgent.ToString().ToLower() If ua.Contains("iphone") Or ua.Contains("ipad") Or ua.Contains("ipod") Then Session("View") = "Apple" Else Session("View") = "Mobile" End If Else Session("View") = "Desktop" End If Else Session("View") = Request.Cookies("ViewType").Value.ToString End If End If SelDevice.SelectedValue = Session("View").ToString If Session("View").ToString = "Apple" Then cssLink.Href = "/gsclaytonmob.css" ElseIf Session("View").ToString = "Mobile" Then cssLink.Href = "/gsclaytonmobold.css" Else cssLink.Href = "/gsclayton2.css" End If GetMenus()End SubC#
protected void Page_Load(object sender, EventArgs e){ if (Session("View") == null) { if (Request.Cookies("ViewType") == null) { if (Request.Browser.IsMobileDevice == true) { string ua = Request.UserAgent.ToString().ToLower(); if (ua.Contains("iphone") | ua.Contains("ipad") | ua.Contains("ipod")) { Session("View") = "Apple"; } else { Session("View") = "Mobile"; } } else { Session("View") = "Desktop"; } } else { Session("View") = Request.Cookies("ViewType").Value.ToString; } } SelDevice.SelectedValue = Session("View").ToString; if (Session("View").ToString == "Apple") { cssLink.Href = "/gsclaytonmob.css"; } else if (Session("View").ToString == "Mobile") { cssLink.Href = "/gsclaytonmobold.css"; } else { cssLink.Href = "/gsclayton2.css"; } GetMenus();}VB
Protected Sub SelDevice_SelectedIndexChanged(sender As Object, e As EventArgs) Handles SelDevice.SelectedIndexChanged Session("View") = SelDevice.SelectedValue Response.Cookies("ViewType").Value = Session("View") Response.Cookies("ViewType").Expires = DateTime.Now.AddDays(1000) If Session("View").ToString = "Apple" Then cssLink.Href = "/gsclaytonmob.css" ElseIf Session("View").ToString = "Mobile" Then cssLink.Href = "/gsclaytonmobold.css" Else cssLink.Href = "/gsclayton2.css" End If GetMenus()End SubC#
protected void SelDevice_SelectedIndexChanged(object sender, EventArgs e){ Session("View") = SelDevice.SelectedValue; Response.Cookies("ViewType").Value = Session("View"); Response.Cookies("ViewType").Expires = DateTime.Now.AddDays(1000); if (Session("View").ToString == "Apple") { cssLink.Href = "/gsclaytonmob.css"; } else if (Session("View").ToString == "Mobile") { cssLink.Href = "/gsclaytonmobold.css"; } else { cssLink.Href = "/gsclayton2.css"; } GetMenus();}VB
Protected Sub GetMenus() Dim m As String = Page.RouteData.Values("PageMenu") Select Case m Case "Home" 'HomeSubMenu.Attributes.CssStyletyle = "Active" Current.InnerHtml = "Home" Dim a As New HyperLink a.NavigateUrl = "Home/" a.Text = "Home" SubMenuList.Controls.Add(a) Dim b As New HyperLink b.NavigateUrl = "About/" b.Text = "About" SubMenuList.Controls.Add(b) Dim c As New HyperLink c.NavigateUrl = "Login/" c.Text = "Login" SubMenuList.Controls.Add(c) End SelectEnd SubC#
protected void GetMenus(){ string m = Page.RouteData.Values("PageMenu"); switch (m) { case "Home": //HomeSubMenu.Attributes.CssStyletyle = "Active" Current.InnerHtml = "Home"; HyperLink a = new HyperLink(); a.NavigateUrl = "Home/"; a.Text = "Home"; SubMenuList.Controls.Add(a); HyperLink b = new HyperLink(); b.NavigateUrl = "About/"; b.Text = "About"; SubMenuList.Controls.Add(b); HyperLink c = new HyperLink(); c.NavigateUrl = "Login/"; c.Text = "Login"; SubMenuList.Controls.Add(c); break; }}You can then style each of the Menus differently in your CSS, for example each of the links in my Sub Menu area are styled differently. The first one is for mobile (full width), and the second for desktop.
CSS
#SubMenu a{color: #332700;float: left;width: 100%;display: block;text-decoration: none;padding: 5px 0px 5px 0px;font-size: large;border-bottom: 1px solid Grey;}#SubMenu a{color: #45144D;padding-left: 8px;float: right;text-decoration: none;}Claytabaseによるウェブサイトのデザイン
これは、当社の Web サイト デザイン サービスの一部である、市場で最も高速で最適化されたシステムの 1 つである Ousia コンテンツ管理システム コードから変更されたコードのセクションです。
これらは、約£500から始まるサイトで利用できます.
システムで行っているように、レスポンシブ CSS を使用することをお勧めします。