Как стать автором
Обновить

Разные Master pages для стационарных и мобильных браузеров

Время на прочтение4 мин
Количество просмотров1.2K
Возникла необходимость сделать ASP.Net сайт, который бы выглядел красиво и в обычных (стационарных) браузерах и в мобильных. Причем достичь этого не за счет ограничения функционала и красивости версии для стационарных браузеров, а с помощью стандартных ASP.Net-овских определений в App_Browsers. Этот способ работает и в ASP.Net MVC-приложениях.


Делать решил через указание соответствующего Master page для страницы. Базовый Master page называется Site.Master. Он предназначен для мобильных и неизвестных браузеров. Его наследник ExtendedSite.Master, добавляющий новые таблицы стилей и Java-скрипты, предназначен для стационарных браузеров, в которых на 100% будут работать все дополнительные фичи.

Есть одна малоизвестная фишка (описание которой ни нашел даже в MSDN), с помощью которой можно просто указать Master Page с привязкой к соответствующему браузеру:

<%@ 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.


На практике оказалось не все так просто… Если открыть эту страницу браузером OperaMini, к примеру, отобразится расширенная версия сайта, предназначенная для стационарных браузеров :( Хуже того, .Net не может определить некоторые новые типы мобильных браузеров.

Нужно определять типы браузеров вручную. Подробное описание этого процесса тоже нигде не нашел.

Добавлять файлы описаний нужно в папку приложения App_Browsers, добавлять что-либо в конфигурацию машины \Microsoft.NET\Framework\\CONFIG\Browsers не рекомендуется, ибо содержимое этой папки изменяется автоматически при каждом обновлении.

Сначала я создал файл Fixed.browser в папке App_Browsers написал что-то в этом роде:

<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.


Теоретически это должно было отфильтровать браузер OperaMini, но практически это определение никак не повлияло на работу сайта. ASP.Net как будто вовсе не видела этого нового типа браузера… После танцев с бубном стало понятно, что наследовать новые определения браузеров можно только от самого конкретного из существующих для данного браузера определений. Грубо говоря, от самого последнего в списке Request.Browser.Browsers.

Итак, были созданы новые определения для IE и Opera в папке App_Browsers (файл Fixed.browser), которые отфильтровывали мобильные версии этих браузеров:

<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.


В конечном итоге системный заголовок страницы выглядел так:

<%@ 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.


Проверено на IE 6, 7, 8, FF 2, Opera 10, GH последней версии, NN последней версии. Из мобильных браузеров проверил только в Opera Mini.

P.S.
Добавлю, что можно «поправить» уже существующее определение браузера, указав refID=«Имя браузера». Это альтернативный вариант, во многих случаях даже лучший вариант.
Теги:
Хабы:
Всего голосов 23: ↑14 и ↓9+5
Комментарии9

Публикации