- Apple iphone image sizes
- Points vs. Pixels
- Retina Graphics
- Adjusting Sizes
- Сравнение размеров iPhone 12, 12 Pro Max, 12 mini, 11, 11 Pro, SE 2, XR, XS, X, 8 Plus, SE, 8, 7, 6, 5
- Сравнение размеров iPhone 12 / 12 mini, iPhone 12 Pro / 12 Pro Max, iPhone 11, iPhone 11 Pro / 11 Pro Max, iPhone SE 2, iPhone XR, iPhone XS / XS Max, iPhone X, iPhone 8 / 8 Plus, iPhone SE, iPhone 7 / 7 Plus, iPhone 6 / 6 Plus, iPhone 6s / 6s Plus, iPhone 5s, iPhone 5
- Apple iphone image sizes
- Designing High-Resolution Artwork
- Viewport Sizes for iPhone
Apple iphone image sizes
(Open image in new window)
To get the screen dimensions (in points) of the current device:
To get the screen scale:
Non-retina devices have a scale of 1.0. Retina devices have a scale of 2.0 or 3.0.
Some dimensions common to all screen sizes:
Status Bar (How to hide the status bar) —> | 20 pts | |
Navigation Bar | 44 pts | |
Nav Bar/Toolbar Icon | 20 x 20 pts (transparent PNG) | |
Tab Bar | 49 pts | |
Tab Bar Icon | 30 x 30 pts (transparent PNGs) |
Points vs. Pixels
Apple introduced retina displays starting with the iPhone 4. You don’t have to modify your code to support high-res displays; the iOS coordinate system uses points rather than pixels, so the dimensions and position in points of all UI elements remains the same across all devices.
iOS supports high resolution displays via the scale property on UIScreen, UIView, UIImage, and CALayer classes. If you load an image from a file whose name includes the @2x modifier, its scale property is set to 2.0. Similarly an image with a @3x modifier has a scale of 3.0. Otherwise the scale defaults to 1.0.
Retina Graphics
To support high-resolution graphics on devices with retina displays, you need @2x and @3x sized images:
@1x: | button.png 60 x 20 |
@2x: | button@2x.png 120 x 40 |
@3x: | button@3x.png 180 x 60 |
To refer to an image in your code (or in Interface Builder), just use the filename of the standard sized image. iOS will automatically detect and use the @2x or @3x version if the device supports it:
Adjusting Sizes
Click here to see how to adjust View Frames and Bounds.
Источник
Сравнение размеров iPhone 12, 12 Pro Max, 12 mini, 11, 11 Pro, SE 2, XR, XS, X, 8 Plus, SE, 8, 7, 6, 5
После выхода линейки iPhone 12 Apple предлагает куда больше вариантов размеров своих смартфонов, чем когда-либо. На изображении ниже вы можете наглядно увидеть, как соотносятся размеры всех актуальных на сегодня iPhone, начиная с iPhone 5 и заканчивая iPhone 12 Pro Max. Как вы можете убедиться, представители последней линейки отлично дополняют этот ряд.
Аналитики считают, что 6,1-дюймовый iPhone 12 станет самым популярным смартфоном сезона 2020 / 2021, а iPhone 12 mini должен стать вторым по востребованности. Надо сказать, что многие пользователи с энтузиазмом отметили возвращение на рынок компактного смартфона. К тому же iPhone 12 mini имеет те же функции, что и iPhone 12. Именно поэтому при выборе одной модели из двух вы ничего не потеряете в производительности, все дело только в размерах. А вот iPhone 12 Pro и Pro Max уже обладают дополнительными функциями.
iPhone 12 mini является на самом деле мощным устройством, несмотря на то, что имеет относительно небольшой по современным меркам OLED экран с диагональю в 5,4 дюйма. Сегодня трудно найти в продаже компактный и заслуживающий при этом внимания смартфон. Да, диагональ в 5,4 дюйма – это не рекорд для смартфонов Apple, но стоит оценить усилия производителя, который смог разместить в тонком и компактном корпусе действительно передовые решения. Если сравнивать размеры iPhone 12 mini, то этот аппарат расположился между iPhone 5s и iPhone 6. Для некоторых будущих владельцев iPhone 12 mini с 5,4-дюймовым экраном от края до края и с новым дизайном может показаться идеальным смартфоном.
Сравнение размеров iPhone 12 / 12 mini, iPhone 12 Pro / 12 Pro Max, iPhone 11, iPhone 11 Pro / 11 Pro Max, iPhone SE 2, iPhone XR, iPhone XS / XS Max, iPhone X, iPhone 8 / 8 Plus, iPhone SE, iPhone 7 / 7 Plus, iPhone 6 / 6 Plus, iPhone 6s / 6s Plus, iPhone 5s, iPhone 5
На изображениях ниже вы сможете наглядно увидеть, как между собой соотносятся все эти аппараты. Все же цифры, это одно, а визуальное представление – совсем другое дело.
Источник
Apple iphone image sizes
The coordinate system iOS uses to place content onscreen is based on measurements in points, which map to pixels in the display. A standard-resolution display has a 1:1 pixel density (or @1x), where one pixel is equal to one point. High-resolution displays have a higher pixel density, offering a scale factor of 2.0 or 3.0 (referred to as @2x and @3x). As a result, high-resolution displays demand images with more pixels.
For example, suppose you have a standard resolution (@1x) image that’s 100px × 100px. The @2x version of this image would be 200px × 200px, and the @3x version would be 300px × 300px.
Supply high-resolution images for all artwork in your app, for all devices your app supports. Depending on the device, you accomplish this by multiplying the number of pixels in each image by a specific scale factor.
Device | Scale Factor |
---|---|
12.9″ iPad Pro | @2x |
11″ iPad Pro | @2x |
10.5″ iPad Pro | @2x |
9.7″ iPad | @2x |
7.9″ iPad mini 4 | @2x |
iPhone X S Max | @3x |
iPhone X S | @3x |
iPhone X R | @2x |
iPhone X | @3x |
iPhone 8 Plus | @3x |
iPhone 8 | @2x |
iPhone 7 Plus | @3x |
iPhone 7 | @2x |
iPhone 6s Plus | @3x |
iPhone 6s | @2x |
iPhone SE | @2x |
Designing High-Resolution Artwork
Use an 8px-by-8px grid. A grid keeps lines sharp and ensures that content is as crisp as possible at all sizes, requiring less retouching and sharpening. Snap the image boundaries to the grid to minimize half pixels and blurry details that can occur when scaling down.
Produce artwork in the appropriate format. In general, use de-interlaced PNG files for bitmap/raster artwork. PNG supports transparency and, because it’s lossless, compression artifacts don’t blur important details or alter colors. It’s a good choice for intricate artwork that requires effects like shading, textures, and highlights. Use JPEG for photos. Its compression algorithm usually produces smaller sizes than lossless formats and artifacts are harder to discern in photos. Photo-realistic app icons, however, look best as PNGs. Use PDF for glyphs and other flat, vector artwork that requires high-resolution scaling.
Use the 8-bit color palette for PNG graphics that don’t require full 24-bit color. Using an 8-bit color palette reduces file size without reducing image quality. This palette is not appropriate for photos.
Optimize JPEG files to find a balance between size and quality. Most JPEG files can be compressed without noticeable degradation of the resulting image. Even a small amount of compression can save significant disk space. Experiment with compression settings on each image to find the optimal value that yields an acceptable result.
Provide alternative text labels for images and icons. Alternative text labels aren’t visible onscreen, but they let VoiceOver audibly describe what’s onscreen, making navigation easier for people with visual disabilities.
Источник
Viewport Sizes for iPhone
Apple iPhone have Retina Display, Which means iPhone screen shows 2x or 3x higher resolution display instead of normal display to our Eye.
In Retina display, ONE pixel may contains many more pixels, thats why Retina Display or Device Dimensions got bigger and we see high resolution of images and content in smaller display. However devices’ actual dimensions depends on actual Pixels Per Inch which is called «Viewport Size» of device or «device-width». Web designs for mobile or CSS responsive styles are based on viewport size of devices, Click here to see popular devices viewport table.
Here we list down all Apple iPhone models with their viewport size, resolution, pixel density, screen size and CSS media queries respectively:
Device Name | Viewport SizePX | Device Resolution PX | Screen Size | Pixel Ratio | Density PPI | CSS PPI | Media Queries |
---|---|---|---|---|---|---|---|
Apple iPhone 12 mini | 360 x 780 | 1080 x 2340 | 5.4″ | 3.0 | 476 | 159 | |
Apple iPhone 12 Pro Max | 428 x 926 | 1284 x 2778 | 6.7″ | 3.0 | 458 | 153 | |
Apple iPhone 12 Pro | 390 x 844 | 1170 x 2532 | 6.1″ | 3.0 | 460 | 153 | |
Apple iPhone 12 | 390 x 844 | 1170 x 2532 | 6.1″ | 3.0 | 460 | 153 | |
Apple iPhone SE (2020) | 375 x 667 | 750 x 1334 | 4.7″ | 2.0 | 326 | 163 | |
Apple iPhone 11 Pro Max | 414 x 896 | 1242 x 2688 | 6.5″ | 3.0 | 458 | 153 | |
Apple iPhone 11 Pro | 375 x 812 | 1125 x 2436 | 5.8″ | 3.0 | 458 | 153 | |
Apple iPhone 11 | 414 x 896 | 828 x 1792 | 6.1″ | 2.0 | 326 | 163 | |
Apple iPhone XS Max | 414 x 896 | 1242 x 2688 | 6.5″ | 3.0 | 458 | 153 | |
Apple iPhone XR | 414 x 896 | 828 x 1792 | 6.1″ | 2.0 | 326 | 163 | |
Apple iPhone X | 375 x 812 | 1125 x 2436 | 5.8″ | 3.0 | 458 | 153 | |
Apple iPhone 8 | 375 x 667 | 750 x 1334 | 4.7″ | 2.0 | 326 | 163 | |
Apple iPhone 8 Plus | 414 x 736 | 1080 x 1920 | 5.5″ | 3.0 | 401 | 134 | |
Apple iPhone 7 | 375 x 667 | 750 x 1334 | 4.7″ | 2.0 | 326 | 163 | |
Apple iPhone 7 Plus | 414 x 736 | 1080 x 1920 | 5.5″ | 3.0 | 401 | 134 | |
Apple iPhone 6s Plus | 414 x 736 | 1080 x 1920 | 5.5″ | 3.0 | 401 | 134 | |
Apple iPhone SE | 320 x 568 | 640 x 1136 | 4.0″ | 2.0 | 326 | 163 | |
Apple iPhone 6s | 375 x 667 | 750 x 1334 | 4.7″ | 2.0 | 326 | 163 | |
Apple iPhone 6 | 375 x 667 | 750 x 1334 | 4.7″ | 2.0 | 326 | 163 | |
Apple iPhone 5s | 320 x 568 | 640 x 1136 | 4.0″ | 2.0 | 326 | 163 | |
Apple iPhone 5c | 320 x 568 | 640 x 1136 | 4.0″ | 2.0 | 326 | 163 | |
Apple iPhone 5 | 320 x 568 | 640 x 1136 | 4.0″ | 2.0 | 326 | 163 |
This website uses cookies, We and our partners use technology such as cookies to analyse our traffic and to show you personalised content and ads. You consent to our cookies by clicking «Agree» or by continuing to use our website.
Источник