Apple'ın yeni cihazlarına karşılık gelen CSS medya sorguları nelerdir? X'in güvenli alan arka plan rengini değiştirmek için body
'un background-color
değerini ayarlamanız gerekiyor.iPhone X/8/8 Artı CSS medya sorguları
17
A
cevap
39
iPhone X
@media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3) { }
iPhone 8
@media only screen
and (device-width : 375px)
and (device-height : 667px)
and (-webkit-device-pixel-ratio : 2) { }
iPhone 8 Artı
@media only screen
and (device-width : 414px)
and (device-height : 736px)
and (-webkit-device-pixel-ratio : 3) { }
iPhone 6 +/6s +/7 +/8 + aynı boyutları paylaşırken, iPhone 7/8 de bunu yapıyor.
Spesifik bir yönelim mi arıyorsunuz?
Portre
aşağıdaki kuralı ekleyin:
and (orientation : landscape)
:
and (orientation : portrait)
Peyzaj
aşağıdaki kural ekle
Referanslar:
3
İşte iphones için aşağıdaki medya sorgularından bazıları. Onları kopyalanan eğer diğer SO cevapları linkler: Ref bağlantı https://mydevice.io/devices/
/* iphone 3 */
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 1) { }
/* iphone 4 */
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 5 */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 6, 6s */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 7, 8 */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 6+, 6s+, 7+, 8+ */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) { }
/* iphone X */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { }
İlgili konular
- 1. CSS medya sorguları ve önemli!
- 2. medya sorguları?
- 3. Farklı Medya sorguları için farklı CSS dosyaları
- 4. Vakfı medya sorguları Vakfı olarak
- 5. Aygıtlar için genel medya sorguları
- 6. CSS ortam sorguları
- 7. iPhone 6 artı
- 8. CSS medya sorguları kullanılarak aygıt yönlendirmesi nasıl algılanır? JavaScript'inizde
- 9. Manzara yazdırma için medya sorguları?
- 10. CSS Ortam Sorguları Birbirini Geçersiz Kılma
- 11. İç içe geçmiş ortamdaki medya sorguları
- 12. CSS medya sorgular ve elemanlar
- 13. Medya Sorguları Ipad uygulamasına herhangi bir çıktı gösterilmez
- 14. CSS - Medya Sorguları Ben medya sorguları yeniyim ve ben en iyi uygulamalar hakkında birkaç öğreticiler izledim ama ben benim işe alınamıyor görünüyor düzgün
- 15. CSS ortamı sorguları sorunu iOS aygıtlarıyla
- 16. Duyarlı tasarım - Medya Sorgulama iPhone üzerinde çalışmıyor mu?
- 17. CSS3 Ortam Sorguları çalışmıyor
- 18. Birleştirilen medya sorgularında ReSharper css hatası
- 19. CSS medya sorgusunu tarayıcı yerine html belgesinin em boyutunu kullanın.
- 20. CSS özgüllüğü, Ortam Sorguları ve min-genişlik
- 21. XCODE iphone 6 artı ve 6s plus, UIAlertViewController
- 22. javascript: artı
- 23. Ortam sorguları ve kaydırma çubuğu genişliği
- 24. Mobil tarayıcıların yüzde kaçı CSS medya sorgularını destekliyor?
- 25. CSS 3 medya sorgusu içinde SASS mantığı nasıl kullanılır?
- 26. IE11, uygulanmayan medya sorgusu varken sayfa yükünü css geçişini tetikler
- 27. neden medya sorgusu çalışmıyor
- 28. Tarayıcınızda yeniden etkinleştirme medyan sorguları yeniden boyutlandırma
- 29. geçerli zamanı artı PHP
- 30. SQL artı İngilizce
için başvuruları eklemek gerekir, örneğin. – nathan
@nathan yanıtı güncellendi. –