Response title
This is preview!
What viewport scale bug fix is jQuery mobile using?
in jQuery Mobile
•
8 years ago
EDIT: Ok, this is strange... I just tested the jQuery Mobile site with my iPad again, and when zooming/rotating the behaviour is much less predictable. I was thinking that the jQuery Mobile guys had found the perfect JS solution to fixing the viewport scale bug.
Hello,
I was just curious what javascript technique jQuery Mobile is using to fix the viewport scale bug?
I've noticed that the viewport tag is this:
<meta name="viewport" content="width=device-width, initial-scale=1">
Which, when used by itself (i.e. without the assistance of JS), the viewport scale "bug" rears its nasty head.
I've been using this fix here, but it has this problem:
- As soon as the user makes a gesture on the document, zooming is enabled again, so if you change the device orientation after that, the zoom bug will still occur.
- The user can only effectively start zooming after starting a second gesture.
jQuery mobile (v 1.1.0) does not appear to have those problems (when testing using non-retina display iPad).
After beautifying this source I think I found the JS used:
- (function (a) {
- var c = a("meta[name=viewport]"),
- b = c.attr("content"),
- e = b + ",maximum-scale=1, user-scalable=no",
- f = b + ",maximum-scale=10, user-scalable=yes",
- d = /(user-scalable[\s]*=[\s]*no)|(maximum-scale[\s]*=[\s]*1)[$,\s]/.test(b);
- a.mobile.zoom = a.extend({}, {
- enabled: !d,
- locked: false,
- disable: function (b) {
- if (!d && !a.mobile.zoom.locked) c.attr("content", e), a.mobile.zoom.enabled = false, a.mobile.zoom.locked = b || false
- },
- enable: function (b) {
- if (!d && (!a.mobile.zoom.locked || b === true)) c.attr("content", f), a.mobile.zoom.enabled = true, a.mobile.zoom.locked = false
- },
- restore: function () {
- if (!d) c.attr("content", b), a.mobile.zoom.enabled = true
- }
- })
- })(jQuery);
Questions:
- Just curious if the authors of jQuery Mobile invented this specifically for that project?
- Do you think this solution is better than the viewport scale bug fix that I linked to above (it appears to be a better solution in my opinion)?
- Is there a blog page (or git gist/repo) somewhere that talks about this solution?
FYI: For obvious reasons, I was not able to just drop that in to my project and have it work... I wanted to ask you folks before I started hacking away at it.
Thanks!
Cheers,
Micky
1