Welcome Guest.   Make a donation to an author on the site October 31, 2014, 10:04:29 AM  *

Please login or register.
Or did you miss your validation email?


Login with username and password (forgot your password?)
Why not become a lifetime supporting member of the site with a one-time donation of any amount? Your donation entitles you to a ton of additional benefits, including access to exclusive discounts and downloads, the ability to enter monthly free software drawings, and a single non-expiring license key for all of our programs.


You must sign up here before you can post and access some areas of the site. Registration is totally free and confidential.
 
Read the Practical Guide to DonationCoder.com Forum Search Features
   
   Forum Home   Thread Marks Chat! Downloads Search Login Register  
Pages: [1]   Go Down
  Reply  |  New Topic  |  Print  
Author Topic: UNANSWERED: Bookmarklet to replace 'user-scalable=0' with 'user-scalable=1'  (Read 7687 times)
lujomu
Member
**
Posts: 37

View Profile Give some DonationCredits to this forum member
« on: January 11, 2011, 02:13:33 AM »

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.
[copy or print]
<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?


Logged
lujomu
Member
**
Posts: 37

View Profile Give some DonationCredits to this forum member
« Reply #1 on: June 03, 2011, 06:38:18 AM »

As I got not a single reply in almost five month, I hope it's alright that I bump this topic once: bump.
Logged
ewemoa
Honorary Member
**
Posts: 2,484



View Profile Give some DonationCredits to this forum member
« Reply #2 on: June 04, 2011, 08:42:26 AM »

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

Formatted for Javascript with the GeSHI Syntax Highlighter [copy or print]
  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 smiley

Update: Changed comment // -> /* */ to facilitate bookmarklet conversion.
« Last Edit: June 05, 2011, 03:15:56 AM by ewemoa » Logged
ewemoa
Honorary Member
**
Posts: 2,484



View Profile Give some DonationCredits to this forum member
« Reply #3 on: June 06, 2011, 12:41:25 AM »

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

Formatted for Javascript with the GeSHI Syntax Highlighter [copy or print]
  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):

Formatted for Javascript with the GeSHI Syntax Highlighter [copy or print]
  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.
Logged
lujomu
Member
**
Posts: 37

View Profile Give some DonationCredits to this forum member
« Reply #4 on: June 06, 2011, 04:13:39 AM »

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:

Formatted for Javascript with the GeSHI Syntax Highlighter [copy or print]
  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):

Formatted for Javascript with the GeSHI Syntax Highlighter [copy or print]
  1. javascript:(function(){
  2. alert("start");
  3. var%20attrval="";
  4. alert("end")}
  5. )();

Any ideas?
Logged
ewemoa
Honorary Member
**
Posts: 2,484



View Profile Give some DonationCredits to this forum member
« Reply #5 on: June 06, 2011, 06:34:06 AM »

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.
Logged
lujomu
Member
**
Posts: 37

View Profile Give some DonationCredits to this forum member
« Reply #6 on: June 06, 2011, 06:43:23 AM »

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.
Logged
ewemoa
Honorary Member
**
Posts: 2,484



View Profile Give some DonationCredits to this forum member
« Reply #7 on: June 06, 2011, 12:28:40 PM »

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?
Logged
lujomu
Member
**
Posts: 37

View Profile Give some DonationCredits to this forum member
« Reply #8 on: June 06, 2011, 03:51:51 PM »

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

And as I just saw, this use the tag
Formatted for Javascript with the GeSHI Syntax Highlighter [copy or print]
  1. user-scalable=no
instead of
Formatted for Javascript with the GeSHI Syntax Highlighter [copy or print]
  1. user-scalable=0
Logged
ewemoa
Honorary Member
**
Posts: 2,484



View Profile Give some DonationCredits to this forum member
« Reply #9 on: June 06, 2011, 08:00:00 PM »

Thanks for the example URLs.

I had also started noticing the use of 'yes' / 'no'.
Logged
ewemoa
Honorary Member
**
Posts: 2,484



View Profile Give some DonationCredits to this forum member
« Reply #10 on: June 08, 2011, 07:49:29 AM »

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:26 AM by ewemoa » Logged
lujomu
Member
**
Posts: 37

View Profile Give some DonationCredits to this forum member
« Reply #11 on: June 09, 2011, 07:22:56 AM »


The site looked promising at first, but none of the bookmarklets there worked either, strangely. Not even in Opera Mobile... Sad
Logged
ewemoa
Honorary Member
**
Posts: 2,484



View Profile Give some DonationCredits to this forum member
« Reply #12 on: June 10, 2011, 01:02:07 AM »

Ah, too bad Sad

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:18 PM by ewemoa » Logged
ewemoa
Honorary Member
**
Posts: 2,484



View Profile Give some DonationCredits to this forum member
« Reply #13 on: June 12, 2011, 11:32:14 PM »

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:

Formatted for HTML with the GeSHI Syntax Highlighter [copy or print]
  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...
Logged
Pages: [1]   Go Up
  Reply  |  New Topic  |  Print  
 
Jump to:  
   Forum Home   Thread Marks Chat! Downloads Search Login Register  

DonationCoder.com | About Us
DonationCoder.com Forum | Powered by SMF
[ Page time: 0.07s | Server load: 0.03 ]