Facebook Twitter Gplus LinkedIn RSS
Home » Blog » jQuery Mobile Splitview Fix for “The New iPad”

jQuery Mobile Splitview Fix for “The New iPad”

Published on March 16th, 2012

If you are using the really awesome jQuery Mobile Splitview Plugin by asyraf9, then you know it breaks your App when used on “The New iPad”, aka the iPad 3. The fix is pretty simple and should make perfect sense given the new denser pixel display ratio.

All you need to do is replace line 8 of jquery.mobile.splitview.js from:

var $query = $.mobile.media('screen and (min-width: 480px)') && ($.mobile.media('(-webkit-max-device-pixel-ratio: 1.2)') || $.mobile.media('(max--moz-device-pixel-ratio: 1.2)'));


var $query = $.mobile.media('screen and (min-width: 480px)') && ($.mobile.media('(-webkit-max-device-pixel-ratio: 2.2)') || $.mobile.media('(max--moz-device-pixel-ratio: 2.2)'));

That’s it!

Be sure to check out the jQuery Mobile Splitview Plugin in full HD action in the latest version of my iTHINKiDO zApp!

About the Author: Sprawl

Stephen Russell is a Mobile App developer and all around IT geek that spends his days running data centers and his nights coding. This site is the go to place for all of zSprawl's work and the infamous development blog. In his free time, he enjoys tinkering with web code, playing video games, and otherwise plotting to take over the Internets.


15 Responses

  1. programaz

    This was exactly what I was looking for. Thanks!!

  2. emargee

    Thanks a heap! I was battling with this today.

  3. I was so glad it was this easy as well. Glad to be of help!

    • sumit

      Thanks a lot! It really got me out of the trouble in my project…

      But have you noticed one thing that the jquery images are not loading on ipad retina in my app. Those images are displayed on ipad 1 (ios 5.1) and (ios 6.0).
      Is there any workaround???

  4. The Merovingian

    Very nice work you’re doing here. Your apps look great.
    What version of jquery/jquerymobile/jquerymobile splitview are you using? I’m having a very hard time finding a stable combination, expecially with forms in scrollable main panel.
    Also, which theme are you using? A custom one?

  5. Ken

    I found your comments while trying to figure out how to get started with the SplitView plugin, and I wonder if you can point me in the right direction. In a post on the JQ forum you mentioned having to compile the code — which surprised me because I’ve never had to compile anything for JavaScript stuff before. Can you tell me how to start? The README file is not very helpful in this regard.

    Any advice would be greatly appreciated. (PS, I’m working in both Windows and Linux environments, so either way is ok.)


  6. Dude you rock, thanks a million!

  7. chris johnson

    Hey Guys,

    Can anyone share what i should do to get this view on my galaxy tablet running ics?Please help me ,i am not able to load it on my tab.Thanks in advance.

  8. Chris

    Have you noticed that when in portrait mode, the loading .gif will not appear during ajax transition or forcing the loading.gif open? Any ideas on how to fix this? Seems to work ok on landscape.

  9. Shailesh

    This was exactly what I was looking for. Thanks!! It save my day. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

© 2012 zSprawl's zApps

Fork me on GitHub