Question

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

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

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

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

Answer 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" />

Answer 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没有在移动设备上工作

2 个答案: