7

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:

enter image description here

That is constant-sized regardless of browser zoom?

Simon Sarris
  • 58,131
  • 13
  • 128
  • 161

3 Answers3

4

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/

Pedro L.
  • 6,834
  • 3
  • 22
  • 26
0

You should be able to do this using the absolute and or Fixed position attribute in CSS. http://www.w3schools.com/cssref/pr_class_position.asp

Andrew Glover
  • 140
  • 1
  • 8
0

Here's an example with some CSS that shows how you could keep the menu the same size and position: http://jsfiddle.net/ZfKyj/2/

Unfortunately, it doesn't seem that you can control the font size so easily, primarily because it's actually pretty complicated to figure out what the zoom level is: How to detect page zoom level in all modern browsers?

You might be better off seeing if there's a way you can use functions from the API of various mobile browsers to generate the context menu, but if there isn't you might be able to figure out something from the question linked in my previous paragraph.

Community
  • 1
  • 1
JAB
  • 19,150
  • 4
  • 64
  • 78