Sayfa boyutu ne olursa olsun aynı boyutta olan mobil cihazlar için bir CSS menüsü nasıl oluşturulur?

Question

Sayfa içeriği üzerinde açılan ve ekranın bir bölümünü bir düğme listesiyle dolduran mobil aygıtlar için bir içerik menüsü oluşturmak istiyorum. Bu kadar basit.

Ancak ne olursa olsun sayfanın cihazda büyültüldüğünde nasıl nerede/aynı tam boyutunu ve sabit pozisyon olmak için menüyü istiyorum. Böylece, menü her çağırıldığında, kullanıcı çok yakınlaştırılmış olsa bile, düğmelerin listesi aynı boyuta sahip görünecektir. Başka bir deyişle, halihazırda cep telefonlarında mevcut olan ve Chrome Mobile Beta'nın seçenekler menüsü gibi mevcut olan menülerin işlevlerini taklit etmek isterim.

sadece CSS ile bu mümkün mü? Ya da bazı JavaScript gerekli? Yoksa genel olarak uygun değil mi? ne olursa olsun tarayıcı zoom sabit ölçekli olan

:

Başka bir deyişle, bu Yenile gibi/etc menüsüne bir menü yapmak mümkündür?

Answer 1

Kullanım göreceli boyutları ve dinamik

Basit demo

yazı tipi boyutunu değiştirmek: Ayrıca CSS3 ölçek özelliğini kullanabilirsiniz

http://jsfiddle.net/tQauj/3/ (sonuç penceresini yeniden boyutlandırmak)

Güncelleme sürümü:

dinamik altlık ve pencere ile

merkezli:
http://jsfiddle.net/tQauj/22/

Answer 2

CSS mutlak ve ya sabit pozisyon özelliğini kullanarak bunu yapmak mümkün olmalıdır. İşte http://www.w3schools.com/cssref/pr_class_position.asp

Answer 3

Eğer menü aynı boyut ve konumunu korumak nasıl gösteren bazı CSS ile bir örnek: Maalesef http://jsfiddle.net/ZfKyj/2/

, öncelikle, çünkü bunu kolayca yazı tipi boyutunu kontrol edebilirsiniz görünmüyor aslında, yakınlaştırma seviyesinin ne olduğunu anlamak için oldukça karmaşıktır: How to detect page zoom level in all modern browsers?

İçerik menüsünü oluşturmak için çeşitli mobil tarayıcıların API'sinden işlevleri kullanmanın bir yolu olup olmadığını görmekten daha iyi olabilirsiniz, ancak eğer ' Bir önceki paragrafta bulunan sorudan bir şey öğrenebiliyor olabilirsiniz.