Detecting zoom level

[what_ho]

Has there been any discussion or html api plans to allow the current
browser zoom level to be detected using javascript?

My use case: A canvas width and height pixel size is separate from its
css dimensions. If you zoom in 400% a canvas will appear blocky, but
if the zoom levels are known one can choose a canvas pixel size and
css dimensions such that, when zoomed, the canvas pixels will have a
1:1 ratio with the screen pixels. This could be used to maintain a pin-
sharp canvas image at any zoom level.

[Simetrical]

On Wed, Mar 17, 2010 at 6:37 AM, what_ho <al...@viovi.com> wrote:
> Has there been any discussion or html api plans to  allow the current
> browser zoom level to be detected using javascript?

That seems like a bad idea -- zoom should work transparently, so that
users who think the content is too small can scale it up and be
certain it will work exactly the same way. Experience suggests that
if we let authors figure out if the page is zoomed, some will figure
out it messes up their site and try to counteract the zooming, or
display an error message, etc.

On the other hand, if zoom causes the page to behave differently (like
blockier canvas), and it's preventable, then it should be prevented by
the browser if possible, not the author. The page author shouldn't
have to expend extra effort to get zoom to work, because if that's
required, most authors won't, and zoom won't in fact work well on many
sites.

But I'm not sure what a good browser-side solution to your problem is,
unfortunately, since I'm not familiar with canvas.

[Brad Neuberg]

That's true; this is exactly what SVG was designed for. That's the Scalable part of Vector Graphics :D

Best,
  Brad

  bradn...@google.com

On Thu, Mar 18, 2010 at 5:35 AM, Alex Pearson <al...@viovi.com> wrote:

You are right that access to zoom details could be abused by web
designers. However I think this is the case for most browser inputs. One
can abuse scrolling for example - make window scrollbars appear, but
disable any actual scrolling by placing all page content in a fixed div
with static css positioning. I'm not sure the html spec should prevent
bad UI outright, better to encourage good UI choices but ultimately
provide a base language for designers to express the UI they wish.

The ideal browser-side solution for my situation is to use svg - vectors
will not get blocky as you zoom in. However I was trying to target
browsers without svg support such as webkit on Android mobile phones.
Drawing vectors manually on a canvas is an alternative here.

One can determine zoom level already on various browsers:
for example compare document.documentElement.clientWidth to
window.outerWidth (Opera) or to
document.defaultView.getComputedStyle(document.documentElement,
null).width; (Safari, Chrome), or use screen.deviceXDPI and
screen.logicalXDPI (IE8).

Where the browser viewport is full-screen like on a mobile browser, zoom
can be calculated by analysing the position of elements positioned by
percentage (percentage positioning does not get affected by zoom level).
And where Flash is available, an invisible flash movie can be embedded
in the page and screen size properties reported from that back to
javascript to calculate the zoom level.

So my question is not about achieving it all, but defining a standard
way of doing so and baking that into the html specifications.

--

Alex Pearson
al...@viovi.com
07971 078295

--
You received this message because you are subscribed to the Google Groups "Chromium HTML5" group.
To post to this group, send email to chromiu...@chromium.org.
To unsubscribe from this group, send email to chromium-html...@chromium.org.
For more options, visit this group at http://groups.google.com/a/chromium.org/group/chromium-html5/?hl=en.