1

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

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

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

我的网站网址是：www.devanghevan.com

4

2 回答 2

2

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

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

<meta name="viewport" content="width=device-width, initial-scale=1" />
于 2013-07-28T18:07:47.900 回答
2

您可以使用 Jquery Mobile：

一般的页面布局是

<!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 移动版，则需要重写大部分视图页面，因为大多数组件（如图像滚动器/滑块、悬停时显示子菜单）在移动版上可能无法正常工作。

或者您可以使用媒体查询来定义不同像素的 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*/
}
于 2013-07-29T07:03:19.347 回答