How do you create a CSS menu for mobile that remains the same size regardless of page scale?

Question

I would like to create a context menu for mobile devices that pops up over the contents of the page and fills a part of the screen with a list of buttons. It is quite simple.

However, I would like the menu to be the same exact size and fixed position no matter where / how the page scales on the device. Therefore, whenever a menu is called, even if the user is very scalable, the list of buttons will be the same size. In other words, I'd like to emulate the functionality of a menu that already exists on mobile phones, such as the beta menu of Chrome Mobile.

Is this possible with just CSS? Or do you need some kind of JavaScript? Or is it even impossible?

In other words, is it possible to create a menu like this Refresh / etc menu:

Is it a constant size regardless of browser scale?

Answer 1

Use relative sizes and change font size dynamically

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

You can also use CSS3 scale property

Updated Version:

With dynamic gaskets and center window:
http://jsfiddle.net/tQauj/22/

Answer 2

You must do this using the absolute and fixed position attribute in CSS. http://www.w3schools.com/cssref/pr_class_position.asp

Answer 3

Here is an example with some CSS that shows how you can keep menus the same size and position: http://jsfiddle.net/ZfKyj/2/

Unfortunately, it seems that you can’t easily control the font size, primarily because it’s actually quite difficult to understand what the zoom level is: How do I determine the page zoom level in all modern browsers?

You might be better off finding out if you can use the functions from the APIs of various mobile browsers to create a context menu, but if not, you could find out something from the question related to my previous paragraph.