The screen size, resolution, and length of the screen edge of the IOS device

Source: Internet
Author: User

1. Starting from iphone3gs, the width and height pixels are 320*480, screen size 3.5 inch, screen ratio 4:3

2.iphone4 and 4S, the wide and high pixels are 640*960, but from the point of view of the program is still 320*480 (this is due to the retina display of the apple, in the retina, a program pixel corresponds to the visible pixels twice times) screen size 3.5 inch, screen ratio 4:3

3.iphone5 and 5S, wide and high Pixel is 640*1136 (program angle is 320*568), screen size 4 inch, screen ratio 16:9

4.iphone6 resolution 375x667 Point, pixel 750x1334 screen 4.7 inch

5.iphone6plus resolution 414x736 Point, pixel 1242x2208 screen 5.5 inch

Typical iphone Apps (except games), many of which are above a navigation bar, a toolbar or a tab bar in the middle, a large chunk to display the content area. IPhone 5 stretched, for the program's adaptation, is not cumbersome, content area content is basically dynamic generation. The adaptation time can be simple up and down unchanged, the middle of the content area stretched on the line. Note that the height of the navigation bar and toolbar is also 44 points. The following is the same program, in iphone 4 vs. iphone 5.

AutoLayout

By this time, the weaknesses of the traditional absolute positioning were revealed. At this point, the iphone has two different sizes of screens on the dot, with 3 sizes on the ipad (some apps are compatible with both the iphone and ipad, called Universal).

After the release of the iOS 6 system, an AutoLayout technology can be used in iOS development. AutoLayout like a Web page, specify the relative position between the view,button,text, such as how much to the left, how much to the right, how much to center, and so on. For example, a simple layout like the following.

Suppose the upper-left corner is View1, the upper-right corner is VIEW2, and the following area is VIEW3. AutoLayout will say:

View1.left =20//View1 left distance boundary 20 points
View1.top = 20//View1 Top distance boundary 20 points

View2.right = 20//View2 Right distance boundary 20 points
View2.top = 20//View2 Top distance boundary 20 points
View2.left = View1.left + 20//View2 to the left of View1 20 points to the right
View2.width = view1.width//View1 width equal to View2 width
View2.height = view1.height//view1 height equals view2 height

view3.left = view1.left      //view3 left align
view1 view3.right = view2.right    / /view3 and View2 right align
view3.top = View1.bottom +//view3 the top distance view1 below 20 points
view3.bottom =            //view3 bottom distance boundary 20 points
view3.height = view1.height  / /view3 height equals view1 height

When you specify the constraints above, the AutoLayout automatically calculates the corresponding layout. Above I write more cumbersome, in fact, a lot of operations can be used to specify the mouse drag, and do not necessarily need to use code. But even with the code, there are shorthand methods. Here is the interface when dragging the mouse to specify constraints in Xib.

and absolute positioning, will directly say

view1.frame = (x1, y1, width1, height1)view2.frame = (x2, y2, width2, height2)view3.frame = (x3, y3, width3, height3)

Absolute positioning is not the specified constraint, but rather the developer's own precise designation of the actual coordinate size of View,button, text, etc.

For a screen, absolute positioning may be different from the AutoLayout, or even absolute positioning will be more convenient. But when you need to fit multiple screens simultaneously, AutoLayout doesn't need to be changed at all. and absolute positioning needs to be calculated according to the screen size. For example, the horizontal screen, under the AutoLayout, will automatically become.

This is just the layout of the 3 controls, and the more the number of controls that appear, the more screen size, the AutoLayout advantage is revealed. Another advantage of AutoLayout is that it is easy to support multiple languages, different languages, the same meaning of the length of the text is different, the use of AutoLayout can also be automatically adapted.

In iOS 6, AutoLayout was also less used, when the screen size was relatively small. IOS 7, it started to be used by a lot of people. And now iOS 8, more on the iphone 6, iphone 6 Plus needs to adapt, AutoLayout trend, not to die.


iphone 6, iphone 6 Plus

The situation has changed since 2014, when the iphone 6 and iphone 6 Plus were released. Compare all iphone models again.

Screen size splits again. But we compare the iphone 5 with the iphone 6 's wide-height ratio.

As can be seen, the iphone 6 and iphone 5 Although the screen size has changed, but their proportion is unchanged. All are 9÷16 = 0.5625 screens.

When the old iphone 5 program runs on iphone 6, if it's not adapted. Older programs automatically zoom in and out, spread the new phone, the old program can also run normally. Such a scheme can be considered as an automatic adaptation. But because the old program stretched, the overall look is a bit virtual, also can not make better use of large screen space.

When a developer needs to be manually adapted, as with the iphone 4 transition to iphone 5, in the new program, specify a new boot image. When the launch diagram is specified, the screen resolution has become the appropriate size, this time using AutoLayout for layout, the same code, you can support multiple models. The new phone has a larger screen, more virtual dots, and more content to display.

It's worth noting that the IPhone 6 Plus. Its width is 414x736 point, 3x mode, ideally, there should be 1242x2208 pixels. But the actual pixel of the iphone 6 Plus is 1080x1920, which is a little less than the ideal value. The IPhone 6 Plus is handled in a way that narrows the overall program down a bit. The resolution is very high, this difference, actually can not see. This processing, can make 44 points of the Click Area constraints, the actual length of the physical, the basic remains unchanged.

The screen size, resolution, and length of the screen edge of the IOS device

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.