¿Cómo combino mi file html "vista de escritorio" con mi file mobile jQuery "vista mobile"?

Para elaborar más sobre mi pregunta, diseñé un website específicamente para ser visto en un escritorio. No se ve bien si se testing en un dispositivo mobile. Por lo tanto, hice un layout completamente diferente para mi website (conteniendo todo el mismo contenido) usando jQuery mobile (debido a su simplicidad).

Ahora me doy count de que probablemente haya mejores forms de hacerlo, como implementar la vista mobile en mi file CSS, en function de las consultas de los medios, pero esta es la forma en que elegí hacerlo y preferiría seguir haciéndolo.

Así que aquí está mi problema:

Quiero usar mi file JavaScript para detectar los diferentes tamaños de pantalla, para mostrar la vista de escritorio o la vista mobile, según el ancho y el alto de la pantalla especificados. A partir de ahora, mi vista de escritorio y la vista mobile están en dos files html diferentes, y sé que eso no es bueno.

No quiero dos files html, ¡quiero combinar los dos! Esa es la única forma en que podría llamar a los dos códigos diferentes en mi file .js, ¿correcto? ¿Alguien sabe como hacer esto?

En mi file de vista mobile, necesitaba include las bibliotecas jQuery. Sin ellos, no funcionará. Pero cuando traté de include eso en mi file de vista de escritorio (dado que ahora estoy tratando de combinar los files), lo probé solo con eso y arruinó por completo la vista en mi escritorio. ¿¿Cómo puedo solucionar esto?? Aparte de eso, supongo que separaría los códigos con dos diferentes para combinar el rest del código, ¿sí?

Por ejemplo,

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

y

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

Por favor, cualquier ayuda sería tan apreciada. Intenté investigar esto, pero no encuentro nada lo suficientemente específico como para responder mis preguntas.

Aquí está el comienzo de mi file de vista de escritorio:

 <!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> 

Y aquí está el comienzo de mi file de vista mobile:

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

Como dije en mi comentario, podrías detectar la navigation mobile con PHP y networkingirigir al usuario al escritorio o al sitio mobile en consecuencia, pero si realmente quieres hacerlo con jQuery, es posible.

Querrá comprobar el ancho de página enRegistro y 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


En cuanto a jQuery arruinando su sitio de escritorio, debe estar usando otro DOM. ¿Está importando MooTools u otro DOM popular que usa $ ? Si es así, necesitaría marcar explícitamente el código jQuery como jQuery("selector")... lugar de $ o usar jQuery.noConflict .

Para más información, mira esta publicación.

Te sugiero que escribas dos files CSS separados … Uno para escritorio y otro para mobile. Y de acuerdo con el tamaño de pantalla actual, cambie los files css usando javascript.

Para lograr esto, puede usar esta secuencia de commands

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