JQuery not working on mobile

Question

I have a website and it's mainly for desktop users. But, it should also be rendered correctly on new mobiles. I have many jQuery scripts in my site like image scroller/slider, display submenu on hover etc. These work very well on desktops.

However, it' not correctly working on mobile browsers. Also, the page layout is not correctly shown on the mobile browser. Different sections on page are shown scattered when seen in mobile browser. I have developed the site using webmatrix and used a single layout page which is rendered on every page. I have included jquery mobile source on the layout page.

I thought the issue would have been sorted with this. But no. It's still not working. Can someone tell me the correct way to include jquery mobile correctly on the page. Is there any compatibility issue between normal jquery version and jquery mobile version. Please help.

my website url is: www.devanghevan.com

jQuery mobile isn't going to fix your viewport issues. I don't see any scripting errors on my iPhone5... See this question/answer: http://stackoverflow.com/questions/6293511/using-viewport-to-create-a-mobile-friendly-version — Matthew Blancarte, Jul 28 '13 at 16:35

score 2 · Answer 1 · answered Jul 28 '13 at 18:07

If you want to use jQuery Mobile, you have to rewrite all your views using the jQuery Mobile conventions. It's long... See this tutorial for a start. It's a bit old, but you'll get the idea: http://www.ubelly.com/2012/02/jquery-mobile-101/

For a quick fix, add this meta tag in your HTML head. It will prevent mobile devices to zoom out when rendering pages.

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

score 2 · Answer 2 · answered Jul 29 '13 at 07:03

You can use Jquery Mobile:

The general pageLayout is

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

if you need to convert the desktop page to jquery mobile, you need to rewrite most of the view pages because most of component like image scroller/slider, display submenu on hover may not work properly on mobile version.

Or you can use media query to define divs for different pixels

@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*/
}

Hi, Thanks for your suggestion. You said "if you need to convert the desktop page to jquery mobile, you need to rewrite most of the view pages because most of component like image scroller/slider, display submenu on hover may not work properly on mobile version." By this, do you mean, I need to add data role for each and every div? Will there be any logic change in slide/on hover-click functionality? Do I need to change anything in jquery code? — Manish_Kanvinde, Jul 29 '13 at 09:01

JQuery not working on mobile

2 Answers2