W jaki sposób tworzysz menu CSS dla urządzeń mobilnych, które pozostaje tej samej wielkości niezależnie od powiększenia strony?

Question

Chciałbym stworzyć menu kontekstowe dla urządzeń mobilnych, które pojawia się na zawartość strony i wypełnia część ekranu listą przycisków. To dość proste.

Chciałabym jednak, aby menu miało taki sam dokładny rozmiar i stałą pozycję, niezależnie od tego, gdzie/jak strona jest powiększana na urządzeniu. Tak więc, gdy menu jest przywoływane, nawet jeśli użytkownik jest bardzo przybliżony, lista przycisków będzie wyglądać tak samo. Innymi słowy, chciałbym naśladować funkcjonalność menu już istniejących w telefonach komórkowych, takich jak menu opcji Chrome Mobile beta.

Czy to możliwe za pomocą samego CSS? A może potrzebujesz JavaScript? Czy ogólnie jest to niewykonalne?

Innymi słowy, jest to możliwe, aby menu jak to Refresh/menu itp:

który jest stały, niezależnie od wielkości zoomu przeglądarki?

Answer 1

Stosować rozmiary względne i zmienić rozmiar czcionki dinamically

Proste demo: http://jsfiddle.net/tQauj/3/ (rozmiar okna wynik)

Można również użyć właściwości skalę CSS3

Zaktualizowana wersja:

Z podkładkami dinamicznymi i okienkami wyśrodkowanymi:
http://jsfiddle.net/tQauj/22/

Answer 2

Powinieneś być w stanie to zrobić za pomocą atrybutu absolute i lub Fixed position w CSS. http://www.w3schools.com/cssref/pr_class_position.asp

Answer 3

Oto przykład z niektórych CSS, który pokazuje w jaki sposób można zachować menu tego samego rozmiaru i pozycji: http://jsfiddle.net/ZfKyj/2/

Niestety, nie wydaje się, że można kontrolować rozmiar czcionki tak łatwo, przede wszystkim dlatego, to naprawdę dość skomplikowane, aby dowiedzieć się, jaki jest poziom powiększenia: How to detect page zoom level in all modern browsers?

Może lepiej sprawdzić, czy istnieje sposób, w jaki można korzystać z funkcji API różnych przeglądarek mobilnych, aby wygenerować menu kontekstowe, ale jeśli nie ma " Być może będziesz w stanie dowiedzieć się czegoś z pytania powiązanego z poprzednim paragrafem.