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!
This was exactly what I was looking for. Thanks!!
Thanks a heap! I was battling with this today.
I was so glad it was this easy as well. Glad to be of help!
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???
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?
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.
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!
I must have misspoke or you misunderstood. No compiling required. 🙂 The Splitview plugin is as simple as downloading and using.
Dude you rock, thanks a million!
I can’t argue with that. Glad to have helped!
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.
Sorry, it’s really only for the iPad.
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!)
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.
This was exactly what I was looking for. Thanks!! It save my day. 🙂