|
lujomu
|
 |
« 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
|
|
« 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
|
|
« 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] (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. |
|
|
|
« Last Edit: June 05, 2011, 03:15:56 AM by ewemoa »
|
Logged
|
|
|
|
|
|
ewemoa
|
|
« 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] 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] 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
|
|
« 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] 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] javascript:(function(){ alert("start"); var%20attrval=""; alert("end")} )();
Any ideas? |
|
|
|
|
Logged
|
|
|
|
|
ewemoa
|
|
« 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.txtThis might be helpful in getting the bookmarklet content on to the Android device. |
|
|
|
|
Logged
|
|
|
|
|
lujomu
|
|
« 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
|
|
« 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
|
|
|
|
|
|
|
ewemoa
|
|
« 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
|
|
« 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
|
|
« 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...  |
|
|
|
|
Logged
|
|
|
|
|
ewemoa
|
|
« Reply #12 on: June 10, 2011, 01:02:07 AM » |
|
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#c6Not 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
|
|
« 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 UniverseI thought it might have something to do with: Formatted for HTML with the GeSHI Syntax Highlighter [ copy or print] <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.COMWonder what the deal is... |
|
|
|
|
Logged
|
|
|
|
|
