StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>During a new Project I made some more research on this topic and found a solution. Its doing what in my opinion Android Browser should do by himself.</p> <p>First check the screen resolution (width) and then zoom the site by JavaScript code. I mostly build my projects with JQuery so I used some of its functions. </p> <p>Check width of screen:</p> <pre><code>newWidth = $(window).width(); </code></pre> <p><em>You can also use native Javascript (DOM) functions to get the width avoiding JQuery. Something like window.width or innerwidth. Don't know by heart.</em></p> <p>Calculate the zoom-level by dividing the actual width of the screen with your page size:</p> <pre><code>zoomlevel = newWidth/defaultWidth; </code></pre> <p>Then adjust the zoom level of the screen:</p> <pre><code>document.getElementById("wrapper").style.zoom = zoomlevel; document.getElementById("wrapper").style.MozTransform = 'scale('+zoomlevel+')'; </code></pre> <p>"wrapper" of course is a div around the whole page. The MozTransform isn't needed if you want to support native browsers only and makes your page look a bit odd, when testing in Firefox.</p> <p>Call this code when the browser window resizes:</p> <pre><code> $(window).resize(function() { CODE }); </code></pre> <p><em>Natively I guess you can use an onResize event.</em> </p> <p>This works fine in Andoid-Browser, Mobile Safari and on BlackBerry devices with OS 6+. Couldn't test it on a Windows mobile yet.</p> <p>As I mentioned obove in the end this is just, what I expected the mobile browsers would do anyway, but didn't do, besides Safari of course.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload