Jakie są zapytania o media CSS odpowiadające nowym urządzeniom Apple? Muszę ustawić body
's background-color
, aby zmienić kolor tła obszaru bezpiecznego X.iPhone X/8/8 Plus Zapytania o media CSS
17
A
Odpowiedz
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 Plus
@media only screen
and (device-width : 414px)
and (device-height : 736px)
and (-webkit-device-pixel-ratio : 3) { }
iPhone 6 +/6s +/7 +/8 + udostępnia te same rozmiary, a iPhone 7/8 również.
Szukasz konkretnej orientacji?
Portret
Dodaj następującą regułę:
and (orientation : portrait)
Krajobrazowy
Dodaj następującą regułę:
and (orientation : landscape)
Odniesienia:
3
Oto niektóre z następujących zapytań o media dla iPhone'ów. Ref link 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) { }
Powiązane problemy
- 1. Zapytania o media CSS
- 2. Zapytania o media CSS i! Ważne
- 3. Zapytania o media CSS dla Galaxy S3
- 4. Zapytania o media CSS i szerokość elementów
- 5. Android WebView i zapytania o media CSS
- 6. Media Css dla Iphone6 i Iphone6 plus
- 7. Czy można zagnieżdżać zapytania o media w zapytaniach o media?
- 8. Zapytania o media jQuery i CSS nie są zsynchronizowane
- 9. Wewnętrzne style CSS w React: jak zaimplementować zapytania o media?
- 10. Specyfika CSS, zapytania o media i min-szerokość
- 11. Jak ustawić zapytania o media portretowe i krajobrazowe w css?
- 12. Gdzie umieścić zapytania o media CSS3?
- 13. Czy ważna reguła zastępuje zapytania o media?
- 14. Ile zapytań o media?
- 15. Łączenie zapytań o media CSS
- 16. Zapytania o media i obrazy tła
- 17. Zapytania o media i szerokość paska przewijania
- 18. iPhone 5 Przekątna VS CSS zapytania mediów
- 19. Definiowanie zapytań o media CSS w selektorach
- 20. Zapytania o media dotyczące drukowania w krajobrazie?
- 21. Zapytania o media - w dwóch szerokościach:
- 22. Dlaczego kolejność zapytań o media ma znaczenie w CSS?
- 23. Czy istnieje korzyść w grupowaniu zapytań o media CSS?
- 24. Zapytania o media nie działają na Iphone, ale dobrze na zmianie rozmiaru przeglądarki
- 25. Zapytanie o media CSS nie działa w IE 9
- 26. Zapytania o media, które nie zastępują stylów natywnych?
- 27. Synchronizacja zapytań o media CSS i JS w przeglądarkach
- 28. Zapytania o media CSS min-width i min-device-width powodują konflikt?
- 29. Zapytania o media - przeglądarka mobilna a przeglądarka stacjonarna
- 30. warunkowo wyświetl treść na podstawie zapytania o media
Powinieneś dodać referencje, np .: Linki do innych odpowiedzi SO, jeśli je skopiowałeś. – nathan
@Nathan answer updated. –