固定ブラウザとモバイルブラウザ用の異なるマスターページ

通常の(固定)ブラウザーとモバイルの両方で美しく見えるASP.Netサイトを作成する必要がありました。 また、これは、固定ブラウザーのバージョンの機能と可愛さを制限することではなく、App_Browsersの標準ASP.Net定義を使用することで実現されます。 このメソッドは、ASP.Net MVCアプリケーションでも機能します。





私は、ページに対応するマスターページを示すことでそれを行うことにしました。 ベースマスターページはSite.Masterと呼ばれます。 モバイルおよび未知のブラウザ向けに設計されています。 後続のExtendedSite.Masterは、新しいスタイルシートとJavaスクリプトを追加し、すべての追加機能が100%動作する固定ブラウザー向けに設計されています。



あまり知られていない機能が1つあります(その説明はMSDNにはありませんでした)。これを使用すると、対応するブラウザーを参照してマスターページを簡単に指定できます。



<%@ 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の構成に何も追加しないことをお勧めします。



最初に、App_BrowsersフォルダーにFixed.browserファイルを作成し、次のように書きました。



< 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でのみチェックされているモバイルブラウザから。



PS

refID = "Browser Name"を指定することにより、既存のブラウザー定義を「修正」できることを追加します。 これは代替手段であり、多くの場合、最良の選択肢です。



All Articles