How do you make a CSS menu for mobile devices that stays the same size regardless of page zoom?

Question

I'd like to create a context menu for mobile devices that pops up over the page content and fills part of the screen with a list of buttons. That's simple enough.

However I'd like the menu to be the same exact size and fixed position regardless of where/how the page is zoomed on the device. So whenever the menu is summoned, even if the user is very zoomed in, the list of buttons will appear to have the same size. In other words, I'd like to mimic the functionality of the menus that already exist on mobile phones such as the Chrome Mobile beta's options menu.

Is this possible with just CSS? Or is some JavaScript needed? Or is it unfeasible in general?

Put another way, is it possible to make a menu like this Refresh/etc menu:

That is constant-sized regardless of browser zoom?

Answer 1

Use relative sizes and change the font size dinamically

Simple demo: http://jsfiddle.net/tQauj/3/ (resize the result window)

You could also use the CSS3 scale property

Updated version:

With dinamic paddings and window centered:
http://jsfiddle.net/tQauj/22/