topbanner_forum
  *

avatar image

Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length
  • Monday March 18, 2024, 9:17 pm
  • Proudly celebrating 15+ years online.
  • Donate now to become a lifetime supporting member of the site and get a non-expiring license key for all of our programs.
  • donate

Author Topic: UNANSWERED: Bookmarklet to replace 'user-scalable=0' with 'user-scalable=1'  (Read 21305 times)

lujomu

  • Member
  • Joined in 2008
  • **
  • default avatar
  • Posts: 40
    • View Profile
    • Donate to Member
I would like to remove the zoom restrictions for mobile web pages on my Android phone (should also work on iPhone/iPad), because my sight is not the best and some fonts are just too tiny for me to read on that little display.

If I researched correctly, the restriction is caused by the 'user-scalable=0' argument of the 'viewport' meta tag, e.g.
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />

I thought it might be possible to replace this 'user-scalable=0' with a 'user-scalable=1' (or remove it alltogether) using a bookmarklet. Unfortunately I don't know any JavaScript, so could someone please help me out on that?



lujomu

  • Member
  • Joined in 2008
  • **
  • default avatar
  • Posts: 40
    • View Profile
    • Donate to Member
As I got not a single reply in almost five month, I hope it's alright that I bump this topic once: bump.

ewemoa

  • Honorary Member
  • Joined in 2008
  • **
  • Posts: 2,922
    • View Profile
    • Donate to Member
The following is something that I tried out via Firebug on http://en.m.wikipedia.org/:

Code: Javascript [Select]
  1. (function ()
  2.   {
  3.     var elts = document.getElementsByName("viewport");
  4.     var attrval = "";
  5.     /* XXX: this is not quite right */
  6.     var cntRe = /(user-scalable\s*=\s*0)/i;
  7.     var i = 0;
  8.     for (i = 0; i < elts.length; i++)
  9.     {
  10.       attrval = elts[i].getAttribute("content");
  11.       if (cntRe.test(attrval))
  12.       {
  13.         elts[i].setAttribute("content", attrval.replace(cntRe, "user-scalable=1"));
  14.       }
  15.     }
  16.   })();

When I examine the DOM before and afterwards, it looks like may be it's working.  Haven't converted it into a bookmarklet to test that way yet.  May be there are other folks who can join in to test :)

Update: Changed comment // -> /* */ to facilitate bookmarklet conversion.
« Last Edit: June 05, 2011, 03:15 AM by ewemoa »

ewemoa

  • Honorary Member
  • Joined in 2008
  • **
  • Posts: 2,922
    • View Profile
    • Donate to Member
I pasted the following as the content of the Location field in a bookmark in Firefox 4.0.1:

Code: Javascript [Select]
  1. javascript:(function () { var elts = document.getElementsByName("viewport"); var attrval = ""; var cntRe = /(user-scalable\s*=\s*0)/i; var i = 0; for (i = 0; i < elts.length; i++) { attrval = elts[i].getAttribute("content"); if (cntRe.test(attrval)) { elts[i].setAttribute("content", attrval.replace(cntRe, "user-scalable=1")); } } })();

Firefox appeared to transform the content as follows (I think this was a simple replacement of spaces with %20):

Code: Javascript [Select]
  1. javascript:(function%20()%20{%20var%20elts%20=%20document.getElementsByName("viewport");%20var%20attrval%20=%20"";%20var%20cntRe%20=%20/(user-scalable\s*=\s*0)/i;%20var%20i%20=%200;%20for%20(i%20=%200;%20i%20<%20elts.length;%20i++)%20{%20attrval%20=%20elts[i].getAttribute("content");%20if%20(cntRe.test(attrval))%20{%20elts[i].setAttribute("content",%20attrval.replace(cntRe,%20"user-scalable=1"));%20}%20}%20})();

This appeared to work on http://en.m.wikipedia.org/.

Note: the regular expression used could probably use some improvement.

lujomu

  • Member
  • Joined in 2008
  • **
  • default avatar
  • Posts: 40
    • View Profile
    • Donate to Member
Hi ewemoa!

Let me start by expressing my gratitude for taking time trying to help me!

I did not get it to work yet, however I think it is the fault of Android or the Android Browser respectively.

Here is what I tried:
I took your script and deleted the line breaks, comments and unnecessary spaces and added two 'alert' functions, to see if the script is executed at all:

Code: Javascript [Select]
  1. javascript:(function(){alert("start");var%20elts=document.getElementsByName("viewport");var%20attrval="";var%20cntRe=/(user-scalable\s*=\s*0)/i;var%20i=0;for(i=0;i<elts.length;i++){attrval=elts[i].getAttribute("content");if(cntRe.test(attrval)){elts[i].setAttribute("content",attrval.replace(cntRe,"user-scalable=1"));}}alert("end")})();

Then I tried it with the following browsers (on the phone):
  • Android Browser
  • Firefox Beta v5.0
  • Dolphin Browser HD Beta v5.0.2
  • Miren Browser v1.2

Only Firefox executes the script (prints the 'end' message twice btw.), but it has no effect on the webpage. The other three browser choke already on the following lines (without the 'var...' line they can execute the script though):

Code: Javascript [Select]
  1. javascript:(function(){
  2. alert("start");
  3. var%20attrval="";
  4. alert("end")}
  5. )();

Any ideas?

ewemoa

  • Honorary Member
  • Joined in 2008
  • **
  • Posts: 2,922
    • View Profile
    • Donate to Member
I haven't had much luck so far with the default browser, nor with Dolphin.

BTW, %20 seems to be something that was added by Firefox (at least for the desktop).  I would try things without them (i.e. use spaces) initially.

May be others might have some better ideas.

FWIW, I've temporarily placed the text of the bookmarklet (what I pasted in to FF 4.0.1) at:

  http://ewemoa.dcmembers.com/tmp/andbkmklt.txt

This might be helpful in getting the bookmarklet content on to the Android device.

lujomu

  • Member
  • Joined in 2008
  • **
  • default avatar
  • Posts: 40
    • View Profile
    • Donate to Member
I would try things without them (i.e. use spaces) initially.

Yes, I did that - it does not work. I tried some 'javascript to bookmarklet' converters, and they all replaced the spaces by '%20'. Seems to me, the javascript must not contain spaces.

ewemoa

  • Honorary Member
  • Joined in 2008
  • **
  • Posts: 2,922
    • View Profile
    • Donate to Member
Hmmm...thanks for trying.

FWIW, I noticed that one bookmarklet I tested in Chrome didn't end up with %20 where there were spaces...perhaps it can work with both.  Also I was able to get Dolphin to save a bookmarklet without ending up with %20s, though haven't had any luck telling if it actually executes anything.

BTW, do you have some sites (specifically URLs) you wouldn't mind sharing for testing that are relevant to this bookmarklet?

lujomu

  • Member
  • Joined in 2008
  • **
  • default avatar
  • Posts: 40
    • View Profile
    • Donate to Member
E.g.:
http://m.lifehacker.com/
http://m.gizmodo.com/

And as I just saw, this use the tag
Code: Javascript [Select]
  1. user-scalable=no
instead of
Code: Javascript [Select]
  1. user-scalable=0

ewemoa

  • Honorary Member
  • Joined in 2008
  • **
  • Posts: 2,922
    • View Profile
    • Donate to Member
Thanks for the example URLs.

I had also started noticing the use of 'yes' / 'no'.

ewemoa

  • Honorary Member
  • Joined in 2008
  • **
  • Posts: 2,922
    • View Profile
    • Donate to Member
Fennec didn't succeed in installing here.  May be on a future device...

BTW, I read that some versions of Opera might work with bookmarklets:

  http://blog.wapreview.com/7176/

I got the feeling that the author of that post has been into Bookmarklets for some time -- perhaps there's some stuff worth investigating there...
« Last Edit: June 08, 2011, 07:56 AM by ewemoa »

lujomu

  • Member
  • Joined in 2008
  • **
  • default avatar
  • Posts: 40
    • View Profile
    • Donate to Member
  http://blog.wapreview.com/7176/

The site looked promising at first, but none of the bookmarklets there worked either, strangely. Not even in Opera Mobile... :(

ewemoa

  • Honorary Member
  • Joined in 2008
  • **
  • Posts: 2,922
    • View Profile
    • Donate to Member
Ah, too bad :(

On a related note, I am looking at the technique described in:

  http://code.google.com/p/bookmarklets/issues/detail?id=1#c6

Not quite there yet, but at least I've managed to get Dolphin and the Android default browser to execute some kind of code -- I wasn't even seeing the result of alert before.

There seems to be something going on with the use of yes / no -- not just 1 / 0 for user-scalable -- even if a page seems to use 1 / 0 in their source.  Haven't pinned it down yet...
« Last Edit: June 10, 2011, 10:33 PM by ewemoa »

ewemoa

  • Honorary Member
  • Joined in 2008
  • **
  • Posts: 2,922
    • View Profile
    • Donate to Member
I'm not seeing the zooming controls show up (Dolphin and Android's browser) for some (many?) wordpress-using places, e.g.:

  Perl 6 Advent Calendar
  Python Conquers The Universe

I thought it might have something to do with:

Code: HTML [Select]
  1. <meta name="msapplication-window" content="width=device-width;height=device-height" />

but the following also seems to have that and I can zoom in and out there...

  WORDPRESS.COM

Wonder what the deal is...