Different Master pages for stationary and mobile browsers

    There was a need to make an ASP.Net site that would look beautiful in both regular (stationary) browsers and mobile. And to achieve this, not by limiting the functionality and prettiness of the version for stationary browsers, but by using standard ASP.Net definitions in App_Browsers. This method also works in ASP.Net MVC applications.


    I decided to do it by indicating the corresponding Master page for the page. The base Master page is called Site.Master. It is designed for mobile and unknown browsers. Its successor ExtendedSite.Master, adding new stylesheets and Java scripts, is designed for stationary browsers, in which all additional features will work 100%.

    There is one little-known feature (the description of which I did not even find on MSDN), with which you can simply specify the Master Page with reference to the corresponding browser:

    <%@ Page Language="C#" Opera8to9:MasterPageFile="~/Views/Shared/ExtendedSite.master" MasterPageFile="~/Views/Shared/Site.master" Inherits="System.Web.Mvc.ViewPage" %>

    * This source code was highlighted with Source Code Highlighter.


    In practice, it turned out to be not so simple ... If you open this page with the OperaMini browser, for example, an extended version of the site is designed for stationary browsers :( Worse, .Net can not detect some new types of mobile browsers.

    You need to determine the types of browsers manually. Detailed description of this process, too, is nowhere found.

    add definitions files need to App_Browsers application folder, add anything to the machine configuration \ Microsoft.NET \ Framework \\ CONFIG \ Browsers are not recommended, because the contents of the folder is changed automatically . When each update

    First, I created a file folder Fixed.browser in App_Browsers wrote something like that:


      
        
          
        

        
          
        

      



    * This source code was highlighted with Source Code Highlighter.


    Theoretically, this should have filtered the OperaMini browser, but practically this definition did not affect the operation of the site. ASP.Net did not seem to see this new type of browser at all ... After dancing with a tambourine, it became clear that new browser definitions can be inherited only from the most specific definitions existing for a given browser . Roughly speaking, from the very last in the Request.Browser.Browsers list.

    So, new definitions for IE and Opera were created in the App_Browsers folder (Fixed.browser file), which filtered out mobile versions of these browsers:


      
        
          
        

        
          
        

      

      
        
          
        

        
          
        

      



    * This source code was highlighted with Source Code Highlighter.


    Ultimately, the system title of the page looked like this:

    <%@ Page Language="C#" MozillaFirefox:MasterPageFile="~/Views/Shared/ExtendedSite.master"
      IEFixed:MasterPageFile="~/Views/Shared/ExtendedSite.master" OperaFixed:MasterPageFile="~/Views/Shared/ExtendedSite.master"
      Safari1Plus:MasterPageFile="~/Views/Shared/ExtendedSite.master" MasterPageFile="~/Views/Shared/Site.master"
      Inherits="System.Web.Mvc.ViewPage" %>

    * This source code was highlighted with Source Code Highlighter.


    Tested on IE 6, 7, 8, FF 2, Opera 10, GH latest version, NN latest version. From mobile browsers checked only in Opera Mini.

    PS
    I’ll add that you can “fix” an existing browser definition by specifying refID = “Browser Name”. This is an alternative, in many cases even the best option.

    Also popular now: