iPhone 5 Permintaan media CSS

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) {}

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

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 */
}

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.

bagi saya, permintaan yang melakukan pekerjaan itu adalah:

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

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*/

}

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
}

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">

Anda bisa mendapatkan jawaban Anda dengan cukup mudah untuk iPhone5 bersama dengan smartphone lain di basis data fitur media untuk perangkat seluler:

http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html

Anda bahkan bisa mendapatkan nilai perangkat Anda sendiri di halaman pengujian di situs web yang sama.

(Penafian: Ini adalah situs web saya)

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)

/* 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) { 

    }
}

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 */
}