为了详细说明我的问题，我专门设计了一个可以在桌面上查看的网站。如果在移动设备上进行测试，它看起来不太好。因此，我使用 jQuery mobile(由于其简单性)为我的网站(包含所有相同的内容)制作了一个完全不同的布局。
我现在意识到可能有更好的方法来做到这一点，例如基于媒体查询在我的 CSS 文件中实现移动 View ，但这是我选择这样做的方式，并且更愿意坚持使用它。
所以这是我的问题:
我想使用我的 JavaScript 文件来检测不同的屏幕尺寸，以便根据指定的屏幕宽度和高度显示桌面 View 或移动 View 。截至目前，我的桌面 View 和移动 View 位于两个不同的 html 文件中，我知道这不好。
我不要两个html文件，我要两者结合!这是我能够在我的 .js 文件中调用两个不同代码的唯一方法，对吗？有谁知道如何做到这一点？
在我的移动 View 文件中，我需要包含 jQuery 库。没有这些，它将无法工作。但是当我尝试将它包含在我的桌面 View 文件中时(因为我现在正在尝试组合这些文件)，我单独测试了它，它完全弄乱了我桌面上的 View 。我该如何解决这个问题？？除此之外，我假设我只是将代码与两个不同的 's 分开，以结合其余的代码，是吗？
例如，
<div id="desktop"> ..... </div> <!-- this is for desktop view -->
<div id="mobile"> ..... </div> <!-- this is for mobile view -->
这是我的桌面 View 文件的开头:
<!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>
<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>
最佳答案
正如我在评论中所说，您可以只使用 detect mobile browsing with PHP 并相应地将用户重定向到桌面或移动站点，但如果您真的想使用 jQuery 来做到这一点，这是可能的。
您需要检查页面宽度 onReady 和 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
就 jQuery 弄乱您的桌面站点而言，您必须使用另一个 DOM。您要导入 MooTools 或其他使用
$ 的流行 DOM 吗？如果是这样，您需要将 jQuery 代码显式标记为 jQuery("selector")... 而不是 $ 或使用 jQuery.noConflict 。有关更多信息，请参阅 this post.
关于javascript - 如何将我的 "desktop view"html 文件与我的 "mobile view"jQuery 移动文件结合起来？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22704272/