iPhone 5 Permintaan media CSS


132

IPhone 5 memiliki layar yang lebih panjang dan tidak menangkap tampilan seluler situs web saya. Apa permintaan desain responsif baru untuk iPhone 5 dan dapatkah saya menggabungkan dengan permintaan iPhone yang ada?

Permintaan media saya saat ini adalah ini:

@media only screen and (max-device-width: 480px) {}

3
Bisakah kami melihat permintaan media Anda yang ada?
BoltClock

Jawaban:


283

Fitur media lain yang bermanfaat adalah device-aspect-ratio.

Perhatikan bahwa iPhone 5 tidak memiliki rasio aspek 16: 9 . Faktanya adalah 40:71.

iPhone <5:
@media screen and (device-aspect-ratio: 2/3) {}

iphone 5:
@media screen and (device-aspect-ratio: 40/71) {}

iphone 6:
@media screen and (device-aspect-ratio: 375/667) {}

iPhone 6 Plus:
@media screen and (device-aspect-ratio: 16/9) {}

iPad:
@media screen and (device-aspect-ratio: 3/4) {}

Referensi:
Pertanyaan Media @ W3C
Model iPhone Perbandingan
Rasio Aspek Kalkulator


2
Saya suka pendekatan ini tetapi tidak bisa membuatnya bekerja dalam tampilan web aplikasi PhoneGap sampai menambahkan -webkit-min-device-pixel-ratio seperti yang dijelaskan oleh Stephen Sprawl zsprawl.com/iOS/2012/09/css-media-queries-for -the-iphone-5 . Layar @media dan (rasio aspek-perangkat: 40/71) dan (-webkit-min-perangkat-piksel-rasio: 2) {// iphone5 for the phonegaps}
TaeKwonJoe

Saya harus menambahkan and (-webkit-min-device-pixel-ratio: 2)di iPhone 5 permintaan media untuk membuatnya berfungsi di tampilan web PhoneGap seperti yang dinyatakan oleh @TaeKwonJoe
Mahendra Liya

1
Terima kasih telah memperbarui ini untuk memasukkan iPhone 6!
Maverick

Ini berfungsi cukup baik ketika saya perlu membedakan iphone 4 dan iphone 5 di css.
euccas

1
Untuk iphone 6, (rasio aspek-perangkat: 667/375) tidak bekerja pada iphone fisik nyata 6. Meskipun bekerja pada simulator iOS. Saya mengubahnya menjadi 375/667 dan berfungsi pada perangkat fisik.
lakukan apa yang sekarang

64

Ada ini, yang saya kreditkan ke blog ini :

@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone 5 only */
}

Perlu diingat itu bereaksi iPhone 5, bukan ke versi iOS tertentu yang diinstal pada perangkat tersebut.

Untuk bergabung dengan versi yang ada, Anda harus dapat membatasi koma:

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone only */
}

NB: Saya belum menguji kode di atas, tapi saya sudah menguji @mediapermintaan yang dibatasi koma sebelumnya, dan mereka bekerja dengan baik.

Perhatikan bahwa hal di atas dapat mengenai beberapa perangkat lain yang memiliki rasio yang sama, seperti Galaxy Nexus. Berikut adalah metode tambahan yang akan menargetkan hanya perangkat yang memiliki satu dimensi 640px (560px karena beberapa anomali piksel-tampilan yang aneh) dan salah satu di antara 960px (iPhone <5) dan 1136px (iPhone 5).

@media
    only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (max-device-height: 640px) and (min-device-height: 560px),
    only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (max-device-width: 640px) and (min-device-width: 560px) {
    /* iPhone only */
}

1
Bisakah Anda menyarankan bagaimana saya bisa menggabungkan permintaan ini dengan yang lama untuk menangkap iPhone 4 dan 5?
Maverick

6
Hati-hati karena ini akan mempengaruhi ponsel lain juga - bukan hanya iPhone. Contohnya adalah Samsung Galaxy Nexus.
Mike Sweeney

@ MikeSweeney Panggilan bagus. Saya telah memperbarui posting saya dengan metode baru yang tidak boleh menyertakan perangkat lain.
Eric

@ Eric Itulah yang akhirnya saya selesaikan setelah melakukan serangkaian pengujian telepon silang - harus membawa ketinggian ke dalam campuran! Tampaknya berfungsi dengan baik di 7-8 berbagai ponsel yang saya uji.
Mike Sweeney

adalah baris ini benar: iPhone 5 and not to iOS 6? Haruskah itu: "iPhone5 dan bukan ke iPhone 6"?
Sgnl

38

Semua jawaban yang tercantum di atas, yang menggunakan max-device-widthatau max-device-heightuntuk pertanyaan media, menderita bug yang sangat kuat: mereka juga menargetkan banyak perangkat seluler populer lainnya (mungkin tidak diinginkan dan tidak pernah diuji, atau yang akan menghantam pasar di masa depan).

Kueri ini akan berfungsi untuk perangkat apa pun yang memiliki layar lebih kecil , dan mungkin desain Anda akan rusak.

Dikombinasikan dengan permintaan media khusus perangkat serupa (untuk HTC, Samsung, IPod, Nexus ...) praktik ini akan meluncurkan bom waktu. Untuk debigging, ide ini dapat membuat CSS Anda menjadi spagetti yang tidak terkontrol. Anda tidak pernah dapat menguji semua perangkat yang mungkin.

Perlu diketahui bahwa satu-satunya permintaan media yang selalu menargetkan IPhone5 dan tidak ada yang lain , adalah:

/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
                 /*IPhone 5 only CSS here*/
}

Perhatikan bahwa lebar dan tinggi yang tepat , bukan lebar maks diperiksa di sini.


Sekarang, apa solusinya? Jika Anda ingin menulis halaman web yang akan terlihat bagus di semua perangkat yang memungkinkan, praktik terbaik adalah Anda menggunakan degradasi

/ * pola degradasi kami memeriksa lebar layar hanya yakin, ini akan berubah beralih dari potret ke lanskap * /

/*css for desktops here*/

@media (max-device-width: 1024px) {
  /*IPad portrait AND netbooks, AND anything with smaller screen*/
  /*make the design flexible if possible */
  /*Structure your code thinking about all devices that go below*/
}
@media (max-device-width: 640px) {
 /*Iphone portrait and smaller*/
}
@media (max-device-width: 540px) {
 /*Smaller and smaller...*/
}
@media (max-device-width: 320px) {
 /*IPhone portrait and smaller. You can probably stop on 320px*/
}

Jika lebih dari 30% pengunjung situs web Anda berasal dari perangkat seluler, jungkirbalikkan skema ini, dan berikan pendekatan pertama-seluler. Gunakan min-device-widthdalam kasus itu. Ini akan mempercepat rendering halaman web untuk browser seluler.


10
Saya akan pergi peningkatan progresif dan mobile pertama. Itu dimulai dengan ponsel dan membangun menggunakan min-device-width.
primavera133

2
Juga perhatikan bahwa solusi tinggi / lebar / piksel-rasio yang hanya cocok dengan iPhone 5 juga akan cocok dengan telepon berikutnya yang tampaknya memiliki karakteristik yang sama. Tema keseluruhan jawaban Anda benar: berpikir dalam hal perangkat tertentu adalah cara yang salah untuk melanjutkan.
Runcing

@Dan - walaupun jawaban Anda tidak secara langsung menjawab pertanyaan, jawaban itu melihatnya dalam perspektif praktik terbaik untuk desain responsif yang lebih luas. Hal-hal yang Anda tulis di sini, menurut saya, sangat dalam dan praktis. Bintang lima.
Dimitri Vorontzov

@Dan - mencoba menerapkan saran Anda, ada sesuatu yang tidak berfungsi. Bolehkah saya meminta Anda untuk melihatnya: stackoverflow.com/questions/16486078/…
Dimitri Vorontzov

@primavera, tolong katakan alasannya. Apa keuntungan dari pendekatan mobile pertama?
S ..

7

bagi saya, permintaan yang melakukan pekerjaan itu adalah:

only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)

7

iPhone 5 di portrait & landscape

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {

/* styles*/
}

iPhone 5 dalam lanskap

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 
/* styles*/

}

iPhone 5 dalam potret

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 
 /* styles*/

}

Mengapa Anda perlu max-device-width : 568pxpotret?
adi518

1
@ adi518 jika Anda tidak menggunakan max-width maka aturan css diterapkan untuk perangkat yang lebih besar dari 320px yang seperti sebagian besar perangkat - tablet desktop dll
Sudheer

1
Kenapa tidak digunakan device-width: 320px and device-height: 568pxsaja?
adi518

5

Tidak ada respons yang berfungsi untuk saya menargetkan Aplikasi phonegapp.

Sebagai titik tautan berikut , solusi di bawah berfungsi.

@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    // css here
}

5

Tambahan yang sangat cepat karena saya telah menguji beberapa opsi dan melewatkan ini di sepanjang jalan. Pastikan halaman Anda memiliki:

<meta name="viewport" content="initial-scale=1.0">


0

afaik no iPhone menggunakan rasio piksel 1,5

iPhone 3G / 3GS: (-webkit-perangkat-pixel-rasio: 1) iPhone 4G / 4GS / 5G: (-webkit-perangkat-pixel-rasio: 2)


0
/* iPad */
@media screen and (min-device-width: 768px) {
    /* ipad-portrait */
    @media screen and (max-width: 896px) { 
        .logo{
            display: none !important;
        }
    }
    /* ipad-landscape */
    @media screen and (min-width: 897px) { 

    }
}
/* iPhone */
@media screen and (max-device-width: 480px) {
    /* iphone-portrait */
    @media screen and (max-width: 400px) { 

    }
    /* iphone-landscape */
    @media screen and (min-width: 401px) { 

    }
}

-3

Anda mungkin harus menurunkan "-webkit-min-device-pixel-ratio" ke 1,5 untuk menangkap semua iPhone?

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 1.5) {
/* iPhone only */
}

1
IPhone mana yang menggunakan rasio piksel perangkat 1,5?
BoltClock

1
Saya sangat merekomendasikan untuk melakukan kueri media tergantung pada lebar perangkat, dan bukan nama perangkat (iPhone). Jadi jika iPhone 5 memiliki lebar lebih, cukup buat itu bisa digunakan.
Tom Roggero
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.