{"id":908,"date":"2018-06-09T17:22:39","date_gmt":"2018-06-09T17:22:39","guid":{"rendered":"http:\/\/www.netexl.com\/blog\/?p=908"},"modified":"2026-04-02T09:51:55","modified_gmt":"2026-04-02T09:51:55","slug":"different-masterpage-for-mobile-and-desktop-in-asp-net","status":"publish","type":"post","link":"https:\/\/www.netexl.com\/blog\/different-masterpage-for-mobile-and-desktop-in-asp-net\/","title":{"rendered":"Different MasterPage for Mobile and Desktop in ASP.NET"},"content":{"rendered":"<p>Now a days more people have been accessing the web on mobile devices as compared to desktops and creating mobile versions\u00a0of websites have become a necessity. In ASP.NET Web Forms application we can switch between different mastre pages basis which device user is using to access the site. This gives a lot of advantages such as changing layout of the pages, applying different style sheets and even load different content if the need be. To achieve this im ASP.NET Web Forms application simply define a base page as following<\/p>\n<pre class=\"lang:default decode:true\">public partial class BasePage : System.Web.UI.Page\r\n{\r\n    protected void Page_PreInit(Object sender, EventArgs e)\r\n    { \r\n        if (Request.Browser.IsMobileDevice)\r\n        {\r\n            this.MasterPageFile = \"~\/Mobile.master\";\r\n        }\r\n        else\r\n        {\r\n            this.MasterPageFile = \"~\/Desktop.master\";\r\n        }\r\n    }\r\n}<\/pre>\n<p>Now rest of the pages (such as example below) can simply inherit base page and all those pages will have different master pages for mobile and desktop.<\/p>\n<pre class=\"lang:default decode:true \">public partial class MyPage : BasePage\r\n{\r\n    protected void Page_Load(object sender, EventArgs e)\r\n    {\r\n\r\n    }\r\n}<\/pre>\n<p>We can simply check for IsMobileDevice property to find out whether or not device is mobile. This option checks of most of the available mobile devices and return a result but the newer devices may not be recognized\u00a0and will need other methods. Read more details about it <a href=\"https:\/\/docs.microsoft.com\/en-us\/aspnet\/whitepapers\/add-mobile-pages-to-your-aspnet-web-forms-mvc-application\" target=\"_blank\">here<\/a>.<\/p>\n<p>For more robust mobile device detection you can use\u00a0<a href=\"https:\/\/51degrees.com\" target=\"_blank\">51degrees.mobi<\/a> which provides\u00a0fastest and the most accurate device detection service.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Now a days more people have been accessing the web on mobile devices as compared to desktops and creating mobile versions\u00a0of websites have become a necessity. In ASP.NET Web Forms application we can switch between different mastre pages basis which device user is using to access the site. This gives a lot of advantages such as changing layout of the pages, applying different style sheets and even load different content if the need be. To achieve this im ASP.NET Web Forms application simply define a base page as following public partial class BasePage : System.Web.UI.Page { protected void Page_PreInit(Object sender, EventArgs e) { if (Request.Browser.IsMobileDevice) { this.MasterPageFile = &#8220;~\/Mobile.master&#8221;; } else { this.MasterPageFile = &#8220;~\/Desktop.master&#8221;; } } } Now rest of the pages (such as example below) can simply inherit base page and all those pages will have different master pages for mobile and desktop. public partial class MyPage :[&#8230;]<\/p>\n","protected":false},"author":5,"featured_media":1539,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,14,19],"tags":[],"class_list":["post-908","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-asp-net","category-how-to","category-mobile"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/908","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/comments?post=908"}],"version-history":[{"count":1,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/908\/revisions"}],"predecessor-version":[{"id":909,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/908\/revisions\/909"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media\/1539"}],"wp:attachment":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media?parent=908"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/categories?post=908"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/tags?post=908"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}