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 的底部添加了一行

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

当我运行 Web 应用程序时，主页正常出现（如预期的那样），但联系页面使用移动样式出现。为了验证这一点，我在该媒体选择器中将主体设置为黄色，果然，它在 Ajaxified（动态加载）关于页面上启动：

在此处输入图像描述

这些 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

正如所提供的详细信息，我会说问题仅在于浮动，只需更新浮动和一个标签

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

将此 clearfix 类与标题 div 下面的 div 一起使用

<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 不是改变页面行为的人，请发布您的实时链接页面或总工作以获取更多详细信息。

更新：大型剃刀网站。

如果您有 ajaxify 大型剃须刀项目，那不会改变行为；是的，它在 MVC4 中准备了强大的 html 对象，因此如果剃刀代码或 html 页面代码或母版页代码中有一些标准忽略。这会发生，我会坚持我的投票，即 Ajaxify 不会改变行为，它是在移动网站下分类的其他东西。

更新：删除浮动

删除 float:none 有帮助 -> 这证明这是一个浮动问题，在此节点之前没有得到照顾。

我想将简化 CSS 添加到常用的基本页面/母版页面中，因为 ajaxify 调用该页面，如果该剃须刀页面的 CSS 未加载，那么也会出现此问题。

于 2013-08-28T11:24:13.963 回答