CSS medya sorguları kullanılarak aygıt yönlendirmesi nasıl algılanır? JavaScript'inizde

Question

yön modunun kullanılarak tespit edilebilir: Ancak

if (window.innerHeight > window.innerWidth) { 
    portrait = true; 
} else { 
    portrait = false; 
} 

, sadece CSS kullanarak yönünü tespit etmek için bir yol var?

Ör.

@media only screen and (width > height) { ... } 

Answer 1

CSS zorunda gibi görünüyor: bir şey gibi

@media screen and (orientation:portrait) { … } 
@media screen and (orientation:landscape) { … } 

bir medya sorgu CSS tanımı http://www.w3.org/TR/css3-mediaqueries/#orientation

olan

Answer 2

@media all and (orientation:portrait) { 
/* Style adjustments for portrait mode goes here */ 
} 

@media all and (orientation:landscape) { 
    /* Style adjustments for landscape mode goes here */ 
} 

ama yine de ekran yönünü saptamak için experiment

Answer 3

Daha spesifik medya yazmak zorunda olduğumuzu düşünüyorum y. Bir medya sorgusu yazdığınızdan emin olun, diğer görünüme etki etmemelidir (Mob, Tab, Desk) aksi halde sorun olabilir. Her iki görünümü ve bir yönlendirme medya sorgusunu kapsayan belirli bir cihaz için bir temel medya sorgusu yazmayı öneririm. Medya yönlendirme sorgusunu aynı anda yazmamız gerekmiyor. Aşağıdaki örneğe başvurabilirsiniz. İngilizce yazım çok iyi değilse üzgünüm. Ör: Tablet

@media screen and (max-width:1024px){ 
..This is basic media query for respective device.In to this media query CSS code cover the both view landscape and portrait view. 
} 
@media screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){ 

..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view. 

} 

Masaüstü

tasarım gereksinimi keyfini başına yapmak

Mobile için

@media screen and (max-width:767px) { 

..This is basic media query for respective device.In to this media query CSS code cover the both view landscape and portrait view. 

} 


@media screen and (min-width:320px) and (max-width:767px) and (orientation:landscape) { 


..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view. 

} 

için ... (:

sayesinde screen.width ve screen.height kullanmak daha iyidir JavaScript yılında Jitu

Answer 4

. Bu iki değer tüm modern tarayıcılarda mevcuttur. Uygulama başlatıldığında tarayıcı küçültülmüş olsa bile, ekranın gerçek boyutlarını verir. Tarayıcı ölçeklendiğinde, window.innerWidth değişiklikleri mobil cihazlarda gerçekleşmeyebilir, ancak bilgisayarlarda ve dizüstü bilgisayarlarda olabilir. screen.width ve screen.height değerleri, mobil cihaz dikey ve yatay modlar arasında geçiş yaptığında değişir, bu nedenle değerleri karşılaştırarak modu belirlemek mümkündür. , bir PC veya dizüstü bilgisayarla uğraştığınız 1280 pikselden daha büyükse.

İki değerin ne zaman çevrildiğini saptamak için Javascript'te bir olay dinleyicisi oluşturabilirsiniz. Konsantrasyona alınacak dikey screen.width değerleri 320px (çoğunlukla iPhone'lar), 360px (çoğu diğer telefon), 768px (küçük tabletler) ve 800px (normal tabletler).