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)'));
to
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.
March 17, 2012 at 1:12 pm
This was exactly what I was looking for. Thanks!!
March 28, 2012 at 8:54 pm
Thanks a heap! I was battling with this today.
March 31, 2012 at 10:24 pm
I was so glad it was this easy as well. Glad to be of help!
February 11, 2013 at 3:18 am
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???
April 11, 2012 at 3:28 am
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?
April 11, 2012 at 1:57 pm
Thanks!!
For splitview, I had to use the fork version of jquery mobile that is provided. You can’t really upgrade that unfortunately.
For themes, I’m using OS_Inspired. Here are some links to help ya:
http://asyraf9.github.com/jquery-mobile/
http://taitems.tumblr.com/post/7240874402/ios-inspired-jquery-mobile-theme-jquery-mobile
The theme seems to have issues with the new jquery mobile RC2
I haven’t tackled it yet but when I do, I’ll be sure to blog.
June 26, 2012 at 7:42 am
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.)
Thanks!
July 7, 2012 at 3:09 pm
I must have misspoke or you misunderstood. No compiling required.
The Splitview plugin is as simple as downloading and using.
July 6, 2012 at 9:45 am
Dude you rock, thanks a million!
July 7, 2012 at 3:04 pm
I can’t argue with that. Glad to have helped!
July 16, 2012 at 3:40 am
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.
July 16, 2012 at 7:03 pm
Sorry, it’s really only for the iPad.
October 19, 2012 at 4:56 am
https://github.com/asyraf9/jquerymobile-splitview
he said “tablets”, not “ipadsonly”
search inside: jquery.mobile.splitview.js for the reason or
try to force
$(‘html’).addClass(‘splitview’);
somewhere in the code…
* * *
I used your solution to enabled it on my mbp retina 15″ (just to dev, thx!)
January 15, 2013 at 8:16 am
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.