UNANSWERED: Bookmarklet to replace 'user-scalable=0' with 'user-scalable=1'

[lujomu]

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.

Code

<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]

As I got not a single reply in almost five month, I hope it's alright that I bump this topic once: bump.

[ewemoa]

The following is something that I tried out via Firebug on http://en.m.wikipedia.org/:

Code: (javascript)

(function ()
  {
    var elts = document.getElementsByName("viewport");
    var attrval = "";
    /* XXX: this is not quite right */
    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"));
      }
    }
  })();

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.

[ewemoa]

I pasted the following as the content of the Location field in a bookmark in Firefox 4.0.1:

Code: (javascript)

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)

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]

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)

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)

javascript:(function(){
alert("start");
var%20attrval="";
alert("end")}
)();

Any ideas?

[ewemoa]

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]

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]

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]

E.g.:
http://m.lifehacker.com/
http://m.gizmodo.com/

And as I just saw, this use the tag

Code: (javascript)

user-scalable=no

instead of

Code: (javascript)

user-scalable=0

[ewemoa]

Thanks for the example URLs.

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

[ewemoa]

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...

[lujomu]

  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]

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...

[ewemoa]

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: (html4strict)

<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...