Kebingungan resolusi iPhone 6 Plus: Xcode atau situs web Apple? untuk pengembangan


265

Situs web Apple mengklaim bahwa resolusinya adalah 1080p: 1920 x 1080

Namun, layar peluncuran yang dibutuhkan oleh Xcode (8.0 GM diluncurkan hari ini) adalah 2208 x 1242.

Siapa yang benar

Xcode


Gambar peluncuran untuk iPhone 6+ harus berukuran 1242x2208 dan 2208x1242. Setidaknya ini membuat aplikasi berfungsi dengan baik di simulator (dan ini didokumentasikan dalam HIG). Saya belum tahu mengapa ini berbeda dari ukuran layar fisik yang seharusnya 1920x1080.
rmaddy

2
perbedaan yang sangat aneh.
JasonGenX


Ini mungkin berubah dalam versi stabil Xcode 6.1. Apakah itu?
Jayprakash Dubey

3
Untuk memperbarui tautan dari Andreas, lihat "Panduan Utama untuk Resolusi iPhone" paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
David James

Jawaban:


308

IPhone 6+ merender secara internal menggunakan aset @ 3x pada resolusi virtual 2208 × 1242 (dengan 736x414 poin), lalu sampel yang ditampilkan. Sama seperti menggunakan resolusi skala pada Retina MacBook - ini memungkinkan mereka menekan beberapa integral untuk aset piksel sementara masih memiliki misalnya teks 12 pt terlihat ukuran yang sama di layar.

Jadi, ya, layar peluncuran harus sebesar itu.

Matematika:

6, 5s, 5, 4s, dan 4 semuanya 326 piksel per inci, dan gunakan aset @ 2x untuk menempel pada sekitar 160 poin per inci dari semua perangkat sebelumnya.

6+ adalah 401 piksel per inci. Jadi secara hipotetis perlu sekitar @ 2,46x aset. Sebaliknya Apple menggunakan aset @ 3x dan menskalakan output lengkap hingga sekitar 84% dari ukuran aslinya.

Dalam praktiknya Apple telah memutuskan untuk menggunakan lebih seperti 87%, mengubah 1080 menjadi 1242. Tidak diragukan lagi, menemukan sesuatu sedekat mungkin menjadi 84% yang masih menghasilkan ukuran integral di kedua arah - 1242/1080 = 2208/1920 persis , sedangkan jika Anda mengubah 1080 menjadi, katakanlah, 1286, Anda entah bagaimana harus membuat 2286,22 piksel secara vertikal untuk skala dengan baik.


6
Bagaimana Anda menghitungnya-> "resolusi virtual 2208 × 1242 (dengan 736x414 poin)" dan ini "perlu aset sekitar @ 2,46x" Apa yang akan UIScreen mainScreen] .bounds.size.height akan kembali untuk 6+? 568, 568 * 3 (1704) atau 1920.
msk

1
Mungkin menambahkan catatan untuk jawaban ini tentang gambar peluncuran? (lihat jawaban Hannes) Berguna untuk diingat untuk aplikasi yang ada ditingkatkan (jika tidak berjalan pada 320x576 @ 3x - Saya bingung sebentar!)
Joseph Humfrey

2
@msk [UIScreen mainScreen].bounds.size.heightmengembalikan 736 di iPhone 6+ simulator saat dalam potret. Ini adalah nilai 2208 dibagi dengan skala 3. Lebar adalah 414.
rmaddy

1
Ukurannya tidak persis sama dengan @ 3x dengan resolusi 1242 * 2208, ini adalah 6% streched.
Binarian

4
Kludge yang mengerikan! Hilangnya kinerja sistem dan memori serta ketajaman di seluruh sistem hanya untuk membuat beberapa penyesuaian ukuran level API sedikit lebih sederhana! Yah saya kira itu semua akan masuk akal ketika mereka merilis iPhone 7 Plus dengan layar 5,5 "461 ppi.
sup

114

Jawabannya adalah aplikasi yang lebih lama berjalan dalam Mode Zoom 2208 x 1242. Tetapi ketika sebuah aplikasi dibangun untuk ponsel baru, resolusi yang tersedia adalah: Super Retina HD 5.8 (iPhone X) 1125 x 2436 (458ppi) , Retina HD 5.5 ( iPhone 6, 7, 8 Plus ) 1242 x 2208 dan Retina HD 4.7 ( iPhone 6 ) 750 x 1334 . Ini menyebabkan kebingungan yang disebutkan dalam pertanyaan. Untuk membuat aplikasi yang menggunakan ukuran layar penuh dari ponsel baru, tambahkan LaunchImages dalam ukuran: 1125 x 2436, 1242 x 2208, 2208 x 1242 dan 750 x 1334.

Diperbarui untuk iPhone 11, 11 Pro, 11 Pro Max

Ukuran untuk iPhone 11 Pro Max dengan penskalaan @ 3x , ruang koordinat: 414 x 896 poin dan 1242 x 2688 piksel, 458 ppi, ukuran fisik perangkat adalah 3,06 x 6,22 in atau 77,8 x 158,0 mm. Layar Super Retina XDR 6.5 ".

Ukuran untuk iPhone 11 Pro dengan skala @ 3x , ruang koordinat: 375 x 812 poin dan 1125 x 2436 piksel, 458 ppi, ukuran fisik perangkat 2,81 x 5,67 in atau 71,4 x 144,0 mm. Layar Super Retina XDR 5.8 ".

Ukuran untuk iPhone 11 dengan skala @ 2x , ruang koordinat: 414 x 896 poin dan 828 x 1792 piksel, 326 ppi, ukuran fisik perangkat 2,98 x 5,94 in atau 75,7 x 150,9 mm. Layar Liquid Retina HD 6.1 ".

Ukuran untuk iPhone X🅂 Max dengan penskalaan @ 3x (nama Apple: layar Super Retina HD 6.5 " ), ruang koordinat: 414 x 896 poin dan 1242 x 2688 piksel, 458 ppi, ukuran fisik perangkat adalah 3.05 x 6.20 in atau 77.4 x 157.5 mm.

let screen = UIScreen.main
print("Screen bounds: \(screen.bounds), Screen resolution: \(screen.nativeBounds), scale: \(screen.scale)")
//iPhone X🅂 Max Screen bounds: (0.0, 0.0, 414.0, 896.0), Screen resolution: (0.0, 0.0, 1242.0, 2688.0), scale: 3.0

Ukuran untuk iPhone X🅁 dengan penskalaan @ 2x (nama Apple: layar Super Retina HD 6.1 " ), ruang koordinat: 414 x 896 poin dan 828 x 1792 piksel, 326 ppi, ukuran fisik perangkat adalah 2,98 x 5,94 in atau 75,7 x 150,9 mm .

let screen = UIScreen.main
print("Screen bounds: \(screen.bounds), Screen resolution: \(screen.nativeBounds), scale: \(screen.scale)")
//iPhone X🅁 Screen bounds: (0.0, 0.0, 414.0, 896.0), Screen resolution: (0.0, 0.0, 828.0, 1792.0), scale: 2.0

Ukuran untuk iPhone X🅂 dan iPhone X dengan penskalaan @ 3x (nama Apple: layar Super Retina HD 5.8 " ), ruang koordinat: 375 x 812 poin dan 1125 x 2436 piksel, 458 ppi, ukuran fisik perangkat 2,79 x 5,65 in atau 70,9 x 143,6 mm.

let screen = UIScreen.main
print("Screen bounds: \(screen.bounds), Screen resolution: \(screen.nativeBounds), scale: \(screen.scale)")
//iPhone X🅂 and X Screen bounds: (0.0, 0.0, 375.0, 812.0), Screen resolution: (0.0, 0.0, 1125.0, 2436.0), scale: 3.0

masukkan deskripsi gambar di sini

Ukuran untuk iPhone 6, 6S, 7 dan 8 dengan penskalaan @ 3x (nama Apple: Retina HD 5.5 ), ruang koordinat: 414 x 736 poin dan 1242 x 2208 piksel, 401 ppi, ukuran fisik layar 2,7 x 4,8 in atau 68 x 122 mm . Saat menjalankan dalam Mode Zoomed, yaitu tanpa LaunchImages baru atau dipilih dalam Pengaturan pada iPhone 6 Plus, skala asli adalah 2,88 dan layar adalah 320 x 568 poin, yang merupakan ukuran asli iPhone 5:

Screen bounds: {{0, 0}, {414, 736}}, Screen resolution: <UIScreen: 0x7f97fad330b0; bounds = {{0, 0}, {414, 736}};
mode = <UIScreenMode: 0x7f97fae1ce00; size = 1242.000000 x 2208.000000>>, scale: 3.000000, nativeScale: 3.000000

Ukuran untuk iPhone 6 dan iPhone 6S dengan penskalaan @ 2x (nama Apple: Retina HD 4.7 ), ruang koordinat: 375 x 667 poin dan 750 x 1334 piksel, 326 ppi, ukuran fisik layar 2,3 x 4,1 inci atau 58 x 104 mm . Saat menjalankan dalam Mode Zoomed, yaitu tanpa LaunchImages baru, layarnya berukuran 320 x 568 poin, yang merupakan ukuran asli iPhone 5:

Screen bounds: {{0, 0}, {375, 667}}, Screen resolution: <UIScreen: 0x7fa01b5182d0; bounds = {{0, 0}, {375, 667}};
mode = <UIScreenMode: 0x7fa01b711760; size = 750.000000 x 1334.000000>>, scale: 2.000000, nativeScale: 2.000000

Dan iPhone 5 untuk perbandingan adalah 640 x 1136, iPhone 4 640 x 960.


Berikut adalah kode yang saya gunakan untuk memeriksa ini (perhatikan bahwa nativeScale hanya berjalan di iOS 8):

UIScreen *mainScreen = [UIScreen mainScreen];
NSLog(@"Screen bounds: %@, Screen resolution: %@, scale: %f, nativeScale: %f",
          NSStringFromCGRect(mainScreen.bounds), mainScreen.coordinateSpace, mainScreen.scale, mainScreen.nativeScale);

Catatan: Unggah LaunchImages jika tidak, aplikasi akan berjalan dalam Mode Zoomed dan tidak menunjukkan skala, atau ukuran layar yang benar. Dalam Mode Zoomed nativeScaledan scaletidak akan sama. Pada perangkat yang sebenarnya skalanya bisa 2,608 pada iPhone 6 Plus, bahkan ketika itu tidak berjalan dalam Mode Zoomed, tetapi akan menunjukkan skala 3,0 saat berjalan di simulator.

Membandingkan iPhone 6 dan 6 Plus


3
Saya kira Anda tidak menambahkan versi gambar peluncuran baru. Itu mungkin mengapa aplikasi berjalan dalam "mode kompatibilitas" dan batas layar adalah 320x576 lama di kedua perangkat.
Daniel Rinser

3
Segera setelah Anda menambahkan ukuran gambar peluncuran baru, Anda mendapatkan ukuran terikat layar (logis) yang benar: 375x667 untuk iPhone 6, dan 414x736 untuk 6+.
Daniel Rinser

1
@DanielRinser Terima kasih untuk itu. Saya akan mencobanya.
Sverrisson

@DanielRinser terima kasih atas masukan Anda pada gambar startup. Saya telah memperbarui jawaban berdasarkan masukan Anda.
Sverrisson

dan bagaimana dengan aset untuk iPhone 4? Bagaimana mereka harus dinamai dan bagaimana menempatkannya di katalog aset jika tidak ada slot untuk mereka? Katalog aset memiliki 3 slot untuk gambar iPhone: 1x, 2x dan 3x. Jika 2x dan 3x untuk iPhone 6 dan 6+ aset, apakah kita menempatkan aset iPhone 4 di 1x? Saya kira tidak.
Bebek

96

Resolusi iPhone 6 Plus nyata / fisik adalah 1920x1080 tetapi dalam Xcode Anda membuat antarmuka untuk resolusi 2208x1242 (736x414 poin) dan pada perangkat itu secara otomatis diperkecil hingga 1920x1080 piksel.

Referensi cepat resolusi iPhone:

Device          Points    Pixels     Scale  Physical Pixels   PPI   Ratio   Size
iPhone XS Max   896x414   2688x1242  3x     2688x1242         458   19.5:9  6.5"
iPhone XR       896x414   1792x828   2x     1792x828          326   19.5:9  6.1"
iPhone X        812x375   2436x1125  3x     2436x1125         458   19.5:9  5.8"
iPhone 6 Plus   736x414   2208x1242  3x     1920x1080         401   16:9    5.5"
iPhone 6        667x375   1334x750   2x     1334x750          326   16:9    4.7"
iPhone 5        568x320   1136x640   2x     1136x640          326   16:9    4.0"
iPhone 4        480x320   960x640    2x     960x640           326   3:2     3.5"
iPhone 3GS      480x320   480x320    1x     480x320           163   3:2     3.5"

Resolusi iPhone


3
Balasan indah dan sederhana. Leszek terima kasih.
SJ Lim

46

Anda mungkin harus berhenti menggunakan gambar peluncuran di iOS 8 dan menggunakan storyboard atau nib / xib.

  • Di Xcode 6 , buka Filemenu dan pilih NewFile...iOSUser InterfaceLaunch Screen.

  • Kemudian buka pengaturan untuk proyek Anda dengan mengkliknya.

  • Di Generaltab, di bagian yang disebut App Icons and Launch Images, setel Launch Screen Fileke file yang baru saja Anda buat (ini akan diatur UILaunchStoryboardNamedalam info.plist).

Perhatikan bahwa untuk sementara ini simulator hanya akan menampilkan layar hitam, jadi Anda perlu menguji pada perangkat nyata .

Menambahkan file xib Layar Peluncuran ke proyek Anda:

Menambahkan file xib Layar Peluncuran baru

Mengkonfigurasi proyek Anda untuk menggunakan file xib Layar Peluncuran alih-alih Katalog Aset:

Konfigurasikan proyek untuk menggunakan Luncurkan Layar xob


1
Instruksi yang hampir sempurna, tetapi seharusnya File -> NEW -> File ... dll Butuh waktu untuk menemukan file kedua :) Terima kasih atas bantuannya!
Will

Bagaimana Anda membuat ini terlihat bagus? Ketika saya mencoba untuk menempatkan gambar di atasnya itu menjadi sangat miring.
badweasel

Jika Anda tidak hanya menampilkan gambar dan Anda ingin menunjukkan UI untuk memuat maka ini adalah ide yang baik, karena gambar masih harus dalam ukuran yang sesuai terlepas dari apakah itu di storyboard atau tidak. Demikian juga jika Anda dapat menggambar gambar dalam kode maka Anda bisa mendapatkan putaran yang saya kira.
AppHandwerker

Anda masih perlu menyediakan file gambar jika Anda mendukung sesuatu sebelum iOS 8 karena xibs peluncuran tidak kompatibel ke belakang.
Mark Bridges

24

Pada perangkat fisik, batas layar utama iPhone 6 Plus adalah 2208x1242 dan nativeBounds adalah 1920x1080 . Ada penskalaan perangkat keras yang terlibat untuk mengubah ukuran ke tampilan fisik.

Pada simulator, batas layar utama iPhone 6 Plus dan nativeBounds keduanya 2208x1242.

Dengan kata lain ... Video, OpenGL, dan hal-hal lain berdasarkan CALayerskesepakatan dengan piksel akan berurusan dengan buffer bingkai 1920x1080 nyata pada perangkat (atau 2208x1242 pada sim). Hal-hal yang berhubungan dengan poin UIKitakan berurusan dengan 2208x1242 (x3) batas dan mendapatkan skala yang sesuai pada perangkat.

Simulator tidak memiliki akses ke perangkat keras yang sama yang melakukan penskalaan pada perangkat dan tidak ada banyak manfaat untuk mensimulasikannya dalam perangkat lunak karena mereka akan menghasilkan hasil yang berbeda dari perangkat keras. Jadi masuk akal untuk mengatur nativeBoundslayar utama perangkat yang disimulasikan ke batas-batas layar utama perangkat fisik.

iOS 8 menambahkan API ke UIScreen( nativeScaledan nativeBounds) untuk memungkinkan pengembang menentukan resolusi yang CADisplaysesuai dengan UIScreen.


13

Bagi mereka yang seperti saya yang bertanya-tanya bagaimana aplikasi warisan diperlakukan, saya melakukan sedikit pengujian dan perhitungan pada subjek.

Berkat petunjuk hannes-sverrisson, saya mulai dengan asumsi bahwa aplikasi lawas diperlakukan dengan tampilan 320x568 di iPhone 6 dan iPhone 6 plus.

Tes dibuat dengan latar belakang hitam sederhana bg@2x.pngdengan batas putih. Latar belakang memiliki ukuran 640x1136 piksel, dan berwarna hitam dengan batas putih dalam 1 piksel.

Di bawah ini adalah screenshot yang disediakan oleh simulator:

Pada tangkapan layar iPhone 6, kita dapat melihat margin 1 piksel di bagian atas dan bawah perbatasan putih, dan margin 2 piksel pada tangkapan layar iPhone 6 plus. Ini memberi kita ruang bekas 1242x2204 di iPhone 6 plus, bukannya 1242x2208, dan 750x1332 di iPhone 6, bukannya 750x1334.

Kita dapat mengasumsikan bahwa dead pixel tersebut dimaksudkan untuk menghormati aspek rasio iPhone 5:

iPhone 5               640 / 1136 = 0.5634
iPhone 6 (used)        750 / 1332 = 0.5631
iPhone 6 (real)        750 / 1334 = 0.5622
iPhone 6 plus (used)  1242 / 2204 = 0.5635
iPhone 6 plus (real)  1242 / 2208 = 0.5625

Kedua, penting untuk mengetahui bahwa sumber daya @ 2x akan diskalakan tidak hanya pada iPhone 6 plus (yang mengharapkan aset @ 3x), tetapi juga pada iPhone 6. Ini mungkin karena tidak menskala sumber daya akan menyebabkan tata letak yang tidak terduga, karena untuk memperbesar tampilan.

Namun, penskalaan itu tidak setara dengan lebar dan tinggi. Saya mencobanya dengan sumber daya 264x264 @ 2x. Mengingat hasilnya, saya harus berasumsi bahwa penskalaan berbanding lurus dengan rasio piksel / poin.

Device         Width scale             Computed width   Screenshot width
iPhone 5        640 /  640 = 1.0                        264 px
iPhone 6        750 /  640 = 1.171875  309.375          309 px
iPhone 6 plus  1242 /  640 = 1.940625  512.325          512 px

Device         Height scale            Computed height  Screenshot height
iPhone 5       1136 / 1136 = 1.0                        264 px
iPhone 6       1332 / 1136 = 1.172535  309.549          310 px
iPhone 6 plus  2204 / 1136 = 1.940141  512.197          512 px

Penting untuk dicatat bahwa penskalaan iPhone 6 tidak sama lebar dan tinggi (309x310). Ini cenderung untuk mengkonfirmasi teori di atas bahwa penskalaan tidak proporsional dalam lebar dan tinggi, tetapi menggunakan rasio piksel / poin.

Saya harap ini membantu.


12

Lihat infografis ini: http://www.paintcodeapp.com/news/iphone-6-screens-demystified

Ini menjelaskan perbedaan antara iPhone lama, iPhone 6 dan iPhone 6 Plus. Anda dapat melihat perbandingan ukuran layar dalam poin, piksel yang diberikan, dan piksel fisik. Anda juga akan menemukan jawaban untuk pertanyaan Anda di sana:

iPhone 6 Plus - dengan Retina display HD. Faktor penskalaan adalah 3 dan gambar kemudian diturunkan dari resolusi 2208 × 1242 piksel menjadi 1920 × 1080 piksel.

Rasio downscaling adalah 1920/2208 = 1080/1242 = 20 / 23. Itu berarti setiap 23 piksel dari render asli harus dipetakan hingga 20 piksel fisik. Dengan kata lain gambar diperkecil menjadi sekitar 87% dari ukuran aslinya.

Memperbarui:

Ada versi terbaru dari infografis yang disebutkan di atas. Ini berisi info lebih rinci tentang perbedaan resolusi layar dan mencakup semua model iPhone sejauh ini, termasuk perangkat 4 inci.

http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions


Jadi bahkan dengan anti-aliasing dimatikan ada anti-aliasing non-opsional yang terjadi di downscaling?
Sam

Seandainya infografik itu menyertakan layar 4 inci, pasti akan luar biasa.
Rajesh

@ Rajesh Saya telah memperbarui jawaban saya, periksa sekarang untuk info tentang perangkat 4 inci.
Darrarski

4

Bahkan jika saya secara umum tidak menyukai nada blog Daring Fireball milik John Gruber, Konjektur Tampilan iPhone yang Lebih Besar layak dibaca.

Dia menduga tapi punya persis tepat baik resolusi di poin dan dalam pixel untuk kedua model, kecuali bahwa ia tidak (saya tidak) mengharapkan Apple untuk membangun sebuah tampilan fisik resolusi yang lebih kecil dan menurunkan (rincian di @ jawaban Tommy).

Inti dari semua ini adalah bahwa seseorang harus berhenti berpikir dalam hal piksel dan mulai berpikir dalam hal poin (ini telah terjadi selama beberapa waktu, ini bukan penemuan baru) dan menghasilkan ukuran fisik elemen UI. Singkatnya, kedua model iPhone baru meningkat dalam hal ini karena secara fisik sebagian besar elemen tetap ukuran yang sama, Anda dapat memasukkan lebih banyak dari mereka di layar (untuk setiap layar yang lebih besar Anda dapat memuat lebih banyak).

Saya hanya sedikit kecewa mereka tidak terus memetakan resolusi internal ke resolusi layar aktual 1: 1 untuk model yang lebih besar.


kami berpikir dalam poin tetapi sayangnya kami harus membuat gambar dalam piksel di Photoshop ... 😃
Duck

2
Piksel penting bagi banyak dari kita karena berbagai alasan. Sementara Apple melakukan pemikiran mereka sendiri tentang topik ini, dengan enggan mereka menambahkan [UIScreen nativeBounds] di iOS8 untuk alasan yang sangat bagus.
ctpenrose

Ya, piksel juga penting, tetapi untuk aset statis seperti gambar (splashscreens dan semacamnya). Maksud saya (pun intended) bukan untuk tata letak layar aplikasi, hal-hal yang diambil secara dinamis.
rawpower
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.