Mobil arayüz tasarımı için ekran boyutları ve güncel cihaz artboard ölçüleri. iPhone, iPad, Samsung Galaxy, Pixel ve katlanabilir cihazlar için pratik viewport değerleri.
iPhone ekranları için: Güncel iPhone point/pixel ölçüleri, safe area ve Dynamic Island kontrolünü iPhone Ekran Boyutları: UI/UX Tasarımcılar İçin Güncel Liste yazısında ayrıca toparladım.
Tablet ekranlar için: Bu yazı mobil ekran ölçülerini genel olarak topluyor. Tablet tarafındaki responsive, split view ve breakpoint mantığını ayrıca Tablet Ekran Boyutları: UI Tasarımcılar İçin Güncel Ölçü Rehberi yazısında daha tasarımcı odaklı anlattım.
Mobil arayüz tasarımı yapmaya başlamadan önce bildiğimiz üzere tasarım editörü uygulaması üzerinden mobil projemize uygun Artboard mobil ekran boyutu belirlemek ile başlıyoruz. Bu belirleyeceğimiz mobil ekran boyutları projemize, müşteri/brief içeriğine göre değişkenlik gösterebildiği gibi, developer desteği verecek kişiler ile görüşülerek de kullanılacak mobil cihazlara göre ortak karar verilebilir.
Yani kısacası responsive web arayüz tasarımı yaparken nasıl belirli kesin boyutlar var ve responsive boyutlandırmayı da düşünerek haraket ediyorsak mobil proje içeriğine görede iPhone ya da Samsung vs. cihazlarda bulunan mobil ekran boyutları ile ilerliyoruz. Burada asıl kilit nokta, mobil arayüz tasarımı grid sisteminde saklı. Kesinlikle mobil grid sistemlerini de ek olarak araştırmanızı öneririm.
Ben genel olarak mobil arayüz tasarımı yaparken Apple iPhone 13 & 14 ekran çözünürlüğünün orantısı olan 390x844px boyutlarını kullanıyorum. Bu boyutlar ile fiziksel telefonum üzerinden rahatlıkla prototip ön izleme alabiliyorum. Böylece mobil arayüz projesini geliştirirken daha sağlıklı bir şekilde ilerlemiş oluyorum.
Mobil arayüz tasarımı yaparken, mobil ekran boyutlarını Sketch, Figma, Adobe XD, Framer, Penpot vs. gibi platformlar üzerinden yeni bir Artboard oluşturma alanından da kolayca mobil ekran çözünürlüklerine ulaşabilirsiniz.
Mobil arayüz tasarımı yaparken kullandığımız tasarım uygulamaları vektör tabanlı (Sketch, Figma, Adobe XD vs.) olduğu için dilediğimiz büyüklükte bozulma olmadan çıktı alabilirsiniz.
Yine de örnek olarak Mobil Ekran Boyutları;
| Cihaz | Boyutlar (genişlik x yükseklik) |
|---|---|
| IPHONE | |
| iPhone 8 | 375×667 px |
| iPhone 8 Plus | 414×736 px |
| iPhone SE | 320×568 px |
| iPhone 11 Pro | 375×812 px |
| iPhone 11 | 414×896 px |
| iPhone 11 Pro Max | 414×896 px |
| iPhone 12 Mini | 375×812 px |
| iPhone 12 | 390×844 px |
| iPhone 12 Pro | 390×844 px |
| iPhone 12 Pro Max | 428×926 px |
| iPhone 13 Mini | 375×812 px |
| iPhone 13 & 14 | 390×844 px |
| iPhone 14 Plus | 428×926 px |
| iPhone 14 & 15 Pro | 393×852 px |
| iPhone 14 & 15 Pro Max | 430×932 px |
| IPAD | |
| iPad Mini 7.9 inç | 768×1024 px |
| iPad Mini 8.3 inç | 744×1133 px |
| iPad 10.2 inç | 810×1080 px |
| iPad Air 10.5 inç | 834×1112 px |
| iPad Air 10.9 inç | 840×1180 px |
| iPad Pro 11 inç | 834×1194 px |
| iPad Pro 12.9 inç | 1024×1366 px |
| ANDROID | |
| Android | 360×640 px |
| Pixel 3 | 411×823 px |
| Pixel 3 XL | 411×846 px |
| Pixel 4 | 411×869 px |
| Pixel 4 XL | 411×869 px |
| Galaxy S10 | 360×760 px |
| Galaxy S10+ | 412×869 px |
| Android Small | 360×640 px |
| Android Large | 360×800 px |
| ANDROID TABLET | |
| Nexus 7 | 600×900 px |
| Nexus 9 | 768×1024 px |
| Nexus 10 | 1200×800 px |
| Surface Pro 8 | 1440×960 px |
2026 Güncel Mobil Ekran Boyutları
Aşağıdaki listeyi eski tabloyu bozmadan güncel cihazlar için ekliyorum. Buradaki değerleri Figma, Sketch, Framer gibi araçlarda pratik artboard / viewport ölçüsü olarak düşünebilirsiniz. Cihazların resmi teknik sayfalarında fiziksel çözünürlük çok daha yüksek görünür; tasarım tarafında ise genelde ölçeklenmiş viewport değeriyle çalışırız.
| Cihaz | Pratik tasarım boyutu (genişlik x yükseklik) |
|---|---|
| GÜNCEL IPHONE | |
| iPhone 15 | 393×852 px |
| iPhone 15 Plus | 430×932 px |
| iPhone 16 | 393×852 px |
| iPhone 16 Plus | 430×932 px |
| iPhone 16e | 390×844 px |
| iPhone 16 Pro | 402×874 px |
| iPhone 16 Pro Max | 440×956 px |
| GÜNCEL IPAD | |
| iPad mini (A17 Pro) 8.3 inç | 744×1133 px |
| iPad (A16) 11 inç | 820×1180 px |
| iPad Air 11 inç | 820×1180 px |
| iPad Air 13 inç | 1024×1366 px |
| iPad Pro 11 inç (M4) | 834×1210 px |
| iPad Pro 13 inç (M4) | 1032×1376 px |
| GÜNCEL ANDROID | |
| Samsung Galaxy S25 | 360×780 px |
| Samsung Galaxy S25+ | 384×832 px |
| Samsung Galaxy S25 Ultra | 384×832 px |
| Samsung Galaxy Z Flip7 | 360×840 px |
| Samsung Galaxy Z Flip7 Kapak Ekranı | 474×524 px |
| Samsung Galaxy Z Fold7 Kapak Ekranı | 360×840 px |
| Samsung Galaxy Z Fold7 Ana Ekran | 984×1092 px |
| Google Pixel 9 | 411×923 px |
| Google Pixel 9 Pro | 412×915 px |
| Google Pixel 9 Pro XL | 448×997 px |
Ben yine de her projede tek bir cihaz ölçüsüne körü körüne bağlı kalmayı doğru bulmuyorum. Başlangıç artboardu için bir ölçü seçmek gerekli ama asıl önemli olan grid, spacing, component mantığı ve responsive davranışı doğru kurmak. Özellikle yeni iPhone, Pixel, Galaxy ve katlanabilir cihazlarda aynı ekranı farklı oranlarda test etmek daha sağlıklı sonuç verir.
Kaynak kontrolü için Apple, Samsung ve Google’ın güncel teknik özellik sayfaları baz alınmıştır. Resmi sayfalarda fiziksel çözünürlük verilir; burada yazdığım değerler mobil arayüz tasarımı için pratik viewport/artboard karşılıklarıdır.
Bu şekilde, her cihazın ekran boyutları kolayca karşılaştırılabilir. Umarım işine yarar!
