Why does Ajaxify'ing a standard MVC Razor Web Application result in mobile CSS styles?

Question

Before jumping off the deep end with Ajaxify on a large Razor project, I thought it best to create an MVC4/Razor test-bed app and try it out.

Repro:

1. Created a standard MVC4/Razor Web Application in VS 2012

2. Added the requisite JQuery add-in files (It already has JQuery 1.8.2 by default in the Razor project template).

Added this to BundleConfig.RegisterBundles

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

Note: I rename all add-ins to the MS standard ~/scripts/addinname-9.9.9.js format to allow for easier upgrading

Added one line to the bottom of Views/Shared/_Layout.cshtml

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

When I run the web app the home page comes up normally (as expected), but the contact page comes up using the mobile styles. To verify this I made the body yellow in that media selector and sure enough, it kicks in on the Ajaxified (dynamically loaded) About page:

These CSS styles are defined in the CSS within the following selector:

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

The page corrects itself if you resize it at all or refresh the browser:

I am surprised that this is possible, as the media selector is meant to be resolution dependant, so thought I would see if anyone can shed light on the cause. The browser window is greater than 850px at all times so the mobile styles should not be shown at all.

The Actual Question Is:

To avoid further confusion the actual question is: I need to know why the media filter selector is triggering, even though the screen is bigger than the min size specified?

Update:

I reduced the Standard MVC4/Razor CSS mobile styles section to the minimum below and the problem still exists. If I removed the float: none, the problem does not occur:

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

Answer 1

As the details provided, I will say the problem is with float only, Just update float and one more tag

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

Use this clearfix class with div below header div

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

I think this will do..

Edit : Ajaxify Update,

The script file of ajaxify has this code,

// 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'
        };

Now for clarification the CSS you have specified is not clashing with the CSS changed by ajaxify.js so there must be something that you are missing, I will say that AJAXIFY.js is not the one who is changing behavior of page, please post live link of your page or total work for more details.

Update: Large Razor Site.

If you have ajaxify large razor project, that will not change the behavior; Yes, it prepares strong html objects in MVC4 so if there is some standard ignores in the razor code or html page code or master page code. this will occur, I will stay with My Vote that Ajaxify does not change the behavior, its something else that is classifies under mobile site.

Update : Removing float

Removing float:none helps --> that prov that this is a float issue, that has not been taken care before this node..

I will like to add that simplify CSS to base page/master page which are commonly used, as the ajaxify calls the page and if the CSS of that razor page is not loaded then also this problem occur.