JQuery 无法在移动设备上运行答案

【问题标题】：JQuery not working on mobileJQuery 无法在移动设备上运行
【发布时间】：2013-07-28 15:51:25
【问题描述】：

我有一个网站，主要面向桌面用户。但是，它也应该在新手机上正确呈现。我的站点中有许多 jQuery 脚本，例如图像滚动条/滑块、悬停时显示子菜单等。这些在桌面上运行良好。

但是，它无法在移动浏览器上正常运行。此外，页面布局未正确显示在移动浏览器上。在移动浏览器中查看时，页面上的不同部分分散显示。我已经使用 webmatrix 开发了该站点，并使用了在每个页面上呈现的单个布局页面。我已经在布局页面上包含了 jquery 移动源。

我以为问题会这样解决。但不是。它仍然无法正常工作。有人能告诉我在页面上正确包含 jquery mobile 的正确方法吗？普通 jquery 版本和 jquery mobile 版本之间是否存在兼容性问题。请帮忙。

我的网址是：www.devanghevan.com

【问题讨论】：

jQuery mobile 不会解决您的视口问题。我在 iPhone5 上没有看到任何脚本错误...请参阅此问题/答案：stackoverflow.com/questions/6293511/…

标签： jquery jquery-mobile

【解决方案1】：

如果您想使用 jQuery Mobile，您必须使用 jQuery Mobile 约定重写所有视图。很长...请参阅本教程开始。它有点旧，但你会明白的： http://www.ubelly.com/2012/02/jquery-mobile-101/

为了快速修复，请在您的 HTML 头中添加此元标记。它将防止移动设备在渲染页面时缩小。

<meta name="viewport" content="width=device-width, initial-scale=1" />

【讨论】：

【解决方案2】：

您可以使用 Jquery Mobile：

一般的pageLayout是

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head> 
<body> 

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Hello world</p>      
    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>

如果您需要将桌面页面转换为jquery mobile，您需要重写大部分视图页面，因为大多数组件都喜欢图像滚动条/滑块，悬停时显示子菜单在移动版本上可能无法正常工作。

或者你可以使用媒体查询来定义不同像素的div

@media screen and (max-width: 480px) and (orientation: portrait){
  /* some CSS here */
  /*define css for all divs*/

}

/* #### Mobile Phones Landscape #### */
@media screen and (max-width: 640px) and (orientation: landscape){
  /* some CSS here */
  /*define css for all divs*/
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-width: 640px){
  /* some CSS here */
  /*define css for all divs*/
}

【讨论】：

您好，感谢您的建议。您说“如果您需要将桌面页面转换为 jquery 移动版，则需要重写大部分视图页面，因为大多数组件（如图像滚动条/滑块、悬停时显示子菜单）在移动版上可能无法正常工作。”你的意思是说，我需要为每个 div 添加数据角色吗？滑动/悬停单击功能是否会有任何逻辑变化？我需要更改 jquery 代码中的任何内容吗？