Separation of the image on the mobile and tablet MVC 4

Question

I am trying to make separate representations for Tablet and Mobile. In app_start i have this code

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("Tablet") { ContextCondition = (ctx => ctx.Request.UserAgent.IndexOf("iPad", StringComparison.OrdinalIgnoreCase) >= 0 || ctx.Request.UserAgent.IndexOf("Android", StringComparison.OrdinalIgnoreCase) >= 0) }); 

I created two layout files, one for mobile and one for Tablet. But there is a conflict when I get access from a mobile device that is on Android. It redirects me to layout.tablet. How can I separate these two devices?

Answer 1

I tested this with the user-agent switch in the browser and it works great.

 DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("Tablet") { ContextCondition = (ctx => ctx.Request.UserAgent.IndexOf("iPad", StringComparison.OrdinalIgnoreCase) >= 0 || ctx.Request.UserAgent.IndexOf("Android", StringComparison.OrdinalIgnoreCase) >= 0 && ctx.Request.UserAgent.IndexOf("mobile", StringComparison.OrdinalIgnoreCase) < 1) }); DisplayModeProvider.Instance.Modes.Insert(1, new DefaultDisplayMode("Mobile") { ContextCondition = (ctx => ctx.GetOverriddenBrowser().IsMobileDevice) }); 

Answer 2

neowinian

Try adding one additional piece of logic:

 && ctx.Request.UserAgent.IndexOf("mobile", StringComparison.OrdinalIgnoreCase) < 0 

This excludes all mobile devices from your DisplayMode for tablet.

 DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("Tablet") { ContextCondition = (ctx => (ctx.Request.UserAgent.IndexOf("iPad", StringComparison.OrdinalIgnoreCase) >=0 || ctx.Request.UserAgent.IndexOf("Android", StringComparison.OrdinalIgnoreCase) >= 0) && ctx.Request.UserAgent.IndexOf("mobile", StringComparison.OrdinalIgnoreCase) < 0) }); 

In addition, you can see:

 DisplayModeProvider.Instance.Modes.Insert(1, new DefaultDisplayMode("Mobile") { ContextCondition = (ctx => ctx.GetOverriddenBrowser().IsMobileDevice) }); 

Answer 3

Do you have a look at a service, for example http://51degrees.mobi , which does all the heavy operations for you with a user / agent / device? Although not free, they make a “lite” version that gives you a lot of what you need, although I notice that “IsTablet” is something in its premium version.

Answer 4

You can use the 51Degrees free cloud solution to search for various types of devices. Using the IsMobile and IsTablet properties, you can redirect depending on the result. You can get a free cloud product from the website and get a free Cloud Key. For information on how to use the API, you can read the tutorials here. https://51degrees.com/Developers/Documentation/APIs/Cloud-API/NET-Cloud

For example, you can make a request to return a device type similar to the one shown below, and then put in your redirection logic based on the response.

 @using (var webClient = new System.Net.WebClient()) { string json = webClient.DownloadString(String.Format( "https://cloud.51degrees.com/api/v1/{0}/match?user-agent= {1}&values=DeviceType", "YOUR KEY HERE", HttpUtility.UrlEncode(Request.UserAgent))); dynamic match = Newtonsoft.Json.Linq.JObject.Parse(json); SortedList<string, string[]> values = Newtonsoft.Json.JsonConvert.DeserializeObject<SortedList<string, string[]>>(match.Values.ToString()); string[] hvValues; if (values.TryGetValue("DeviceType", out hvValues)) { foreach (string s in hvValues) { <h4> Device Type: @s </h4> } } 

Disclosure: I work on 51Degrees.