现在我们开发的很多web应用都要支持手机等移动设备。为了让手机用户能有更加好的用户体验,我们经常为手机设备专门准备一套前端的页面。这样当用户使用普通电脑来访问的时候,我们的应用就向用户展示普通电脑的页面。当用户使用手机等移动设备来访问我们的系统的时候,我们就向用户展示手机设备的页面。但是这时候另一个问题出现了。如何判断用户在使用什么设备访问我们的应用?是使用手机还是普通电脑?
网上能查到的不同的实现方式不少。我在这里也介绍一个我们最近在项目中采用的方法。
我们使用的是UAParser。UAParser是一个开源的项目,主要的功能是实现对各种用户useragent的解析。现在已经有很多种编程语言的实现。C#只是其中的一种。
为了方便大家理解,我在这里把主要的步骤和代码都写出来。
1) 用vs2013新建一个mvc的项目。
2) 使用nuget下载UAParser
3) 新建一个接口和实现它的类。
4) 代码
IUserAgent
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace UserDeviceDetectWebApplication.Service { public interface IUserAgent { string RawValue { get; set; } UserAgentInfo UserAgent { get; } DeviceInfo Device { get; } OSInfo OS { get; } bool IsBot { get; } bool IsMobileDevice { get; } bool IsTablet { get; } //bool IsPdfConverter { get; } } public sealed class DeviceInfo { public DeviceInfo(string family, bool isBot) { this.Family = family; this.IsBot = isBot; } public override string ToString() { return this.Family; } public string Family { get; private set; } public bool IsBot { get; private set; } } public sealed class OSInfo { public OSInfo(string family, string major, string minor, string patch, string patchMinor) { this.Family = family; this.Major = major; this.Minor = minor; this.Patch = patch; this.PatchMinor = patchMinor; } public override string ToString() { var str = VersionString.Format(Major, Minor, Patch, PatchMinor); return (this.Family + (!string.IsNullOrEmpty(str) ? (" " + str) : null)); } public string Family { get; private set; } public string Major { get; private set; } public string Minor { get; private set; } public string Patch { get; private set; } public string PatchMinor { get; private set; } private static string FormatVersionString(params string[] parts) { return string.Join(".", (from v in parts where !string.IsNullOrEmpty(v) select v).ToArray<string>()); } } public sealed class UserAgentInfo { public UserAgentInfo(string family, string major, string minor, string patch) { this.Family = family; this.Major = major; this.Minor = minor; this.Patch = patch; } public override string ToString() { var str = VersionString.Format(Major, Minor, Patch); return (this.Family + (!string.IsNullOrEmpty(str) ? (" " + str) : null)); } public string Family { get; private set; } public string Major { get; private set; } public string Minor { get; private set; } public string Patch { get; private set; } } internal static class VersionString { public static string Format(params string[] parts) { return string.Join(".", (from v in parts where !string.IsNullOrEmpty(v) select v).ToArray<string>()); } } }
UAParserUserAgent
using System; using System.Collections.Generic; using System.Linq; using System.Web; using uap = UAParser; using System.Text.RegularExpressions; namespace UserDeviceDetectWebApplication.Service { public class UAParserUserAgent : IUserAgent { private readonly static uap.Parser s_uap; private static readonly Regex s_pdfConverterPattern = new Regex(@"wkhtmltopdf", RegexOptions.Compiled | RegexOptions.IgnoreCase | RegexOptions.CultureInvariant); # region Mobile UAs, OS & Devices private static readonly HashSet<string> s_MobileOS = new HashSet<string> { "Android", "iOS", "Windows Mobile", "Windows Phone", "Windows CE", "Symbian OS", "BlackBerry OS", "BlackBerry Tablet OS", "Firefox OS", "Brew MP", "webOS", "Bada", "Kindle", "Maemo" }; private static readonly HashSet<string> s_MobileBrowsers = new HashSet<string> { "Android", "Firefox Mobile", "Opera Mobile", "Opera Mini", "Mobile Safari", "Amazon Silk", "webOS Browser", "MicroB", "Ovi Browser", "NetFront", "NetFront NX", "Chrome Mobile", "Chrome Mobile iOS", "UC Browser", "Tizen Browser", "Baidu Explorer", "QQ Browser Mini", "QQ Browser Mobile", "IE Mobile", "Polaris", "ONE Browser", "iBrowser Mini", "Nokia Services (WAP) Browser", "Nokia Browser", "Nokia OSS Browser", "BlackBerry WebKit", "BlackBerry", "Palm", "Palm Blazer", "Palm Pre", "Teleca Browser", "SEMC-Browser", "PlayStation Portable", "Nokia", "Maemo Browser", "Obigo", "Bolt", "Iris", "UP.Browser", "Minimo", "Bunjaloo", "Jasmine", "Dolfin", "Polaris", "Skyfire" }; private static readonly HashSet<string> s_MobileDevices = new HashSet<string> { "BlackBerry", "MI PAD", "iPhone", "iPad", "iPod", "Kindle", "Kindle Fire", "Nokia", "Lumia", "Palm", "DoCoMo", "HP TouchPad", "Xoom", "Motorola", "Generic Feature Phone", "Generic Smartphone" }; #endregion private readonly HttpContextBase _httpContext; private string _rawValue; private UserAgentInfo _userAgent; private DeviceInfo _device; private OSInfo _os; private bool? _isBot; private bool? _isMobileDevice; private bool? _isTablet; private bool? _isPdfConverter; static UAParserUserAgent() { s_uap = uap.Parser.GetDefault(); } public UAParserUserAgent(HttpContextBase httpContext) { this._httpContext = httpContext; } public string RawValue { get { if (_rawValue == null) { if (_httpContext.Request != null) { _rawValue = _httpContext.Request.UserAgent.ToString(); } else { _rawValue = ""; } } return _rawValue; } // for (unit) test purpose set { _rawValue = value; _userAgent = null; _device = null; _os = null; _isBot = null; _isMobileDevice = null; _isTablet = null; _isPdfConverter = null; } } public virtual UserAgentInfo UserAgent { get { if (_userAgent == null) { var tmp = s_uap.ParseUserAgent(this.RawValue); _userAgent = new UserAgentInfo(tmp.Family, tmp.Major, tmp.Minor, tmp.Patch); } return _userAgent; } } public virtual DeviceInfo Device { get { if (_device == null) { var tmp = s_uap.ParseDevice(this.RawValue); _device = new DeviceInfo(tmp.Family, tmp.IsSpider); } return _device; } } public virtual OSInfo OS { get { if (_os == null) { var tmp = s_uap.ParseOS(this.RawValue); _os = new OSInfo(tmp.Family, tmp.Major, tmp.Minor, tmp.Patch, tmp.PatchMinor); } return _os; } } public virtual bool IsBot { get { if (!_isBot.HasValue) { _isBot = _httpContext.Request.Browser.Crawler || this.Device.IsBot; } return _isBot.Value; } } public virtual bool IsMobileDevice { get { if (!_isMobileDevice.HasValue) { _isMobileDevice = s_MobileOS.Contains(this.OS.Family) || s_MobileBrowsers.Contains(this.UserAgent.Family) || s_MobileDevices.Contains(this.Device.Family); } return _isMobileDevice.Value; } } public virtual bool IsTablet { get { if (!_isTablet.HasValue) { _isTablet = Regex.IsMatch(this.Device.Family, "iPad|Kindle Fire|Nexus 10|Xoom|Transformer|MI PAD|IdeaTab", RegexOptions.CultureInvariant) || this.OS.Family == "BlackBerry Tablet OS"; } return _isTablet.Value; } } public virtual bool IsPdfConverter { get { if (!_isPdfConverter.HasValue) { _isPdfConverter = s_pdfConverterPattern.IsMatch(this.RawValue); } return _isPdfConverter.Value; } } } }
5) 修改HomeController.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using UserDeviceDetectWebApplication.Service; using System.Diagnostics; namespace UserDeviceDetectWebApplication.Controllers { public class HomeController : Controller { public ActionResult Index() { UAParserUserAgent userAgent = new UAParserUserAgent(this.HttpContext); ViewBag.Os= userAgent.OS.ToString(); ViewBag.Device = userAgent.Device.ToString(); ViewBag.Agent = userAgent.UserAgent.ToString(); ViewBag.RawValue = userAgent.RawValue.ToString(); Debug.WriteLine("user os: "+userAgent.OS.ToString()); Debug.WriteLine("user Device: " + userAgent.Device.ToString()); Debug.WriteLine("user Agent: " + userAgent.UserAgent.ToString()); Debug.WriteLine("user RawValue: " + userAgent.RawValue.ToString()); if (userAgent.IsMobileDevice) { Debug.WriteLine("这是一个手机"); ViewBag.MobilePc = "手机"; } else if (userAgent.IsTablet) { ViewBag.MobilePc = "平板"; Debug.WriteLine("这是一个平板"); } else { ViewBag.MobilePc = "普通电脑"; Debug.WriteLine("这是一个普通电脑"); } return View(); } } }
6) 修改viewshomeIndex.cshtml
@{ Layout = null; ViewBag.Title = "Home Page"; } <p> 用户的 操作系统:@ViewBag.Os</br> 用户的设备: @ViewBag.Device </br> 用户的浏览器: @ViewBag.Agent </br> 原始的用户访问设备信息: @ViewBag.RawValue </br> 用户使用的是 @ViewBag.MobilePc </br> </p>
7) 编译我们的程序,运行它。试着用不同的浏览器,不同的手机访问http://localhost:62526/Home/Index。端口号你的环境可能和我的不一样哦。如果你不知道如何运行mvc的web程序,可以咨询我哦。
欢迎大家指正和讨论。