How do I combine my "desktop view" html file with my "mobile view" jQuery mobile file?

To elaborate more on my question, I designed a website specifically to be viewed on a desktop. It does not look good if being tested on a mobile device. Therefore, I made a complete different layout for my website (containing all of the same content) by using jQuery mobile (due to its simplicity).

I realize now that there were probably better ways in doing this, such as implementing the mobile view in my CSS file, based on media queries, but this is the way that I chose to do it and would prefer to stick with it.

So here's my problem:

I want to use my JavaScript file to detect the different screen sizes, in order to display the desktop view or mobile view, based on their specified screen width and height. As of now, my desktop view and mobile view are in two different html files, and I know that is not good.

I don't want two html files, I want to combine the two! That's the only way I would be able to call the two different codes in my .js file, correct? Does anyone know how to do this?

In my mobile view file, I needed to include the jQuery libraries. Without those, it will not work. But when I tried including that in my desktop view file (since I am now trying to combine the files), I tested it alone with just that and it completely messed up the view on my desktop. How do I solve this?? Other than that, I'm assuming I would just separate the codes with two different 's as far as combining the rest of the code, yeah?

For example,

    <div id="desktop"> ..... </div>  <!-- this is for desktop view -->

and

    <div id="mobile"> ..... </div> <!-- this is for mobile view -->

Please, any help would be so appreciated. I've tried researching this, but I can't find anything specific enough to answer my questions.

Here is the beginning of my desktop view file:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="hwk5.css">
    <script type="text/javascript" src="hwk5.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</head>
<body>

And here is the beginning of my mobile view file:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

    <style>
        img.fullscreen {
            max-height:50%;
            max-width:50%;
        }
    </style>
</head>
<body>

Answers


As I said in my comment, you could just detect mobile browsing with PHP and redirect the user to the desktop or mobile site accordingly, but if you really want to do this with jQuery, it is possible.

You would want to check the page width onReady and onResize:

$(document).ready(function(){resize();});
$(window).resize(function(){resize();});

function resize()
{
    var mobileMaxWidth = 640; //Define this to whatever size you want
    if($(window).width() > mobileMaxWidth)
    {
        $("div#desktop").show();
        $("div#mobile").hide();
    }
    else
    {
        $("div#desktop").hide();
        $("div#mobile").show();
    }
}
JSFiddle

As far as jQuery messing up your desktop site, you must be using another DOM. Are you importing MooTools or another popular DOM that uses $? If so, you would need to explicitly mark jQuery code as jQuery("selector")... instead of $ or use jQuery.noConflict.

For more information, see this post.


I Suggest You To Write Two Seperate CSS Files... One For Desktop And Other For Mobile. And According to the current screen size change the css files using javascript.

To achieve this You Can Use this script

<script type="text/javascript">
    $(document).ready(function () {
        changecss();
    });
    $(window).resize(function () { changecss(); });
    function changecss() {
        var windowwidth = $(window).width();
        var windowheight = $(window).height();

        if (windowwidth >= 1024 && windowheight >= 768) {
            //alert('Screen size: 1024x768 or larger');
            $("link[rel=stylesheet]:not(:first)").attr({ href: "Style2.css" });
        }
        else {
            $("link[rel=stylesheet]:not(:first)").attr({ href: "Style1.css" });
        }
    }
</script>

HTML

<div>
The colour of this text will change.
</div>

Need Your Help

java library for Apple PropertyList-1.0.dtd

java xml collections plist in-memory

I need to read into memory XML file with such header