1

大規模な Razor プロジェクトでAjaxifyの深いところに飛び込む前に、MVC4/Razor テストベッド アプリを作成して試してみるのが最善だと思いました。

再現:

  1. VS 2012 で標準の MVC4/Razor Web アプリケーションを作成

  2. 必要な JQuery アドイン ファイルを追加しました (Razor プロジェクト テンプレートには既定で JQuery 1.8.2 が既に含まれています)。

これを BundleConfig.RegisterBundles に追加しました

bundles.Add(new ScriptBundle("~/bundles/ajaxify").Include(
            "~/Scripts/jquery-scrollto-{version}.js",
            "~/Scripts/jquery.history-{version}.js",
            "~/Scripts/ajaxify-html5-{version}.js"
            ));

注: 簡単にアップグレードできるように、すべてのアドインの名前を MS 標準の ~/scripts/addinname-9.9.9.js 形式に変更します

Views/Shared/_Layout.cshtml の下部に 1 行追加

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/ajaxify")    <=== ADDED THIS LINE
@RenderSection("scripts", required: false)

Web アプリを実行すると、ホームページは正常に (予想どおり) 表示されますが、連絡先ページはモバイル スタイルを使用して表示されます。これを確認するために、そのメディア セレクターでボディを黄色にしました。確かに、Ajax 化された (動的に読み込まれた) About ページが表示されます。

ここに画像の説明を入力

これらの CSS スタイルは、次のセレクター内の CSS で定義されます。

@media only screen and (max-width: 850px)

ページのサイズを変更するか、ブラウザを更新すると、ページは自動的に修正されます。 ここに画像の説明を入力

メディアセレクターは解像度に依存することを意図しているため、これが可能であることに驚いています。ブラウザー ウィンドウは常に 850 ピクセルを超えるため、モバイル スタイルはまったく表示されません。

実際の質問は次のとおりです。

さらなる混乱を避けるために、実際の質問は次のとおりです。画面が指定された最小サイズよりも大きい場合でも、メディアフィルターセレクターがトリガーされる理由を知る必要がありますか?

アップデート：

以下の標準 MVC4/Razor CSS モバイル スタイル セクションを最小限に減らしましたが、問題はまだ存在します。を削除した場合float: none、問題は発生しません。

/********************
*   Mobile Styles   *
********************/
@media only screen and (max-width: 850px) {
    body{
        background-color: yellow;
    }
    /* header
    ----------------------------------------------------------*/
    header .float-left,
    header .float-right {
        float: none;
    }
}
4

1 に答える 1

-1

詳細が提供されているように、問題はフロートのみにあると言えます。フロートともう1つのタグを更新するだけです

.header .float-left{float:left;}
.header .float-right{float:right;}
.clearfix{clear:both}

ヘッダー div の下の div でこの clearfix クラスを使用します

<div class="header">
   //your codes
</div>
<div class="clearfix"></div>

これでいけると思います..

編集：Ajaxify更新、

ajaxifyのスクリプトファイルにはこのコードがあり、

// Prepare Variables
        var contentSelector = '#content,article:first,.article:first,.post:first',
        $content = $(contentSelector).filter(':first'),
        contentNode = $content.get(0),
        $menu = $('#menu,#nav,nav:first,.nav:first').filter(':first'),
        activeClass = 'active selected current youarehere',
        activeSelector = '.active,.selected,.current,.youarehere',
        menuChildrenSelector = '> li,> ul > li',
        completedEventName = 'statechangecomplete',
        /* Application Generic Variables */
        $window = $(window),
        $body = $(document.body),
        rootUrl = History.getRootUrl(),
        scrollOptions = {
                duration: 800,
                easing:'swing'
        };

明確にするために、指定した CSS は変更された CSS と衝突していないajaxify.jsため、何か不足している必要があります。ページの動作を変更しているのは AJAXIFY.js ではありません。あなたのライブ リンクを投稿してください。詳細については、ページまたは総作業量をご覧ください。

更新: 大きな Razor サイト。

大きなかみそりプロジェクトを ajaxify している場合、動作は変わりません。はい、MVC4 で強力な html オブジェクトを準備するので、かみそりコードまたは html ページ コードまたはマスター ページ コードに標準の無視がある場合。これが発生する場合は、Ajaxify が動作を変更しないという私の投票にとどまります。これは、モバイル サイトに分類される別のものです。

更新：フロートの削除

float:none を削除すると役立ちます --> これは float の問題であり、このノードの前に対処されていないことを証明します..

ajaxifyがページを呼び出し、そのカミソリページのCSSがロードされていない場合、この問題も発生するため、一般的に使用されるベースページ/マスターページに単純化されたCSSを追加したいと思います。

于 2013-08-28T11:24:13.963 に答える