⬆️ ⬇️

Different Master Pages for landline and mobile browsers

There was a need to make an ASP.Net site that would look beautiful in ordinary (stationary) browsers and in mobile. And to achieve this not by limiting the functionality and the beautiful 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 specifying the appropriate 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, which adds new style sheets and Java scripts, is intended for stationary browsers in which all additional features will work 100%.



There is one little-known chip (the description of which was not even found in 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 was not so simple ... If you open this page with OperaMini browser, for example, an expanded version of the site is displayed, intended for stationary browsers :( Worse, .Net cannot identify some new types of mobile browsers.



It is necessary to determine the types of browsers manually. A detailed description of this process is also not found anywhere.



Add description files to the App_Browsers application folder, add something to the \ Microsoft.NET \ Framework \\ CONFIG \ Browsers machine configuration, because the contents of this folder change automatically with every update.



First, I created the Fixed.browser file in the App_Browsers folder and wrote something like this:



< browsers >

< browser id ="OperaFixed" parentID ="Opera" >

< identification >

< userAgent nonMatch ="Opera Mini" />

</ identification >

< capabilities >

< capability name ="browser" value ="OperaFixed" />

</ capabilities >

</ browser >

</ browsers >




* This source code was highlighted with Source Code Highlighter .




Theoretically, this was supposed to filter the OperaMini browser, but in practice this definition had no effect on 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 only be inherited from the specific definitions that exist for this browser . Roughly speaking, from the very last one in the Request.Browser.Browsers list.



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



< browsers >

< browser id ="OperaFixed" parentID ="Opera8to9" >

< identification >

< userAgent nonMatch ="Opera Mini" />

</ identification >

< capabilities >

< capability name ="browser" value ="OperaFixed" />

</ capabilities >

</ browser >

< browser id ="IEFixed" parentID ="IE6to9" >

< identification >

< userAgent nonMatch ="Windows CE" />

</ identification >

< capabilities >

< capability name ="browser" value ="IEFixed" />

</ capabilities >

</ browser >

</ browsers >




* This source code was highlighted with Source Code Highlighter .




Ultimately, the system page title 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, latest version GH, latest version NN. 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 option, in many cases even the best option.

Source: https://habr.com/ru/post/71931/



All Articles