Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

CrossApp screen fit scheme


May 21, 2021 CrossApp


Table of contents


When we develop mobile applications, we will first face a very difficult problem, that is, the market for mobile phones, tablets and other devices have different screen sizes, resolutions, screen width ratio is also diverse, how to solve this problem?
To solve this problem, we need to understand some of the basic concepts about display that are already on the market for our common dimensions and resolutions.
Common resolutions
1136*640,1920*1080,960*640,1280*720,800*480。
Common screen size
3.5 inches, 4 inches, 5 inches, 5.5 inches, 7 inches, and so on.

PX: pixels, absolute pixels. The size is fixed and does not change with the screen

PPI: Pixels Per Inch represents the number of pixels per inch. T herefore, the higher the PPI value, the higher the display's ability to display the image at a higher density. Of course, the higher the density displayed, the higher the trueness.

DPI: Points per inch, usually on Android devices, represent the fineness of the display of the device's screen in DPI. Typically, PPI and DPI can represent the same concept, with PPI primarily for display devices, and DPI is more commonly used on printout devices, but both represent the pixels contained per inch



CrossApp offers us solutions:

The principle of CrossApp secondary fit scheme fit is to keep the physical dimensions of the UI as close as possible, but there may still be subtle changes, depending on the system. T he ppi values vary from device to device, and the display will vary from device to device while maintaining the physical size of the UI. Devices with large screen sizes display relatively more content, and the higher the ppi value, the finer the picture.

Dip type data provided by CrossApp

DPoint: Point
DSize: Area
DRect: Area (including a point and area)

A suitable fit is recommended

Try to avoid fixed values
Use a scale value
Use the baseline value
To prevent stretch deformation, use the CAScale9ImageView control more
Font size recommended (10)
For example:
DSize (100,200);
DSIze (screen width/2, screen height/2);
DPoint (width of parent node -100, width of parent node -200);


CrossApp cross-screen vertical screen switching method

ios method:

Open the file in the RootViewController.mm directory

// Override to allow orientations other than the default portrait orientation.
// This method is deprecated on ios6
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    //竖屏
    //return UIInterfaceOrientationIsPortrait( interfaceOrientation );
    //横屏
    //return UIInterfaceOrientationIsLandscape( interfaceOrientation );
}
// For ios6, use supportedInterfaceOrientations & shouldAutorotate instead
- (NSUInteger) supportedInterfaceOrientations{
     
#ifdef __IPHONE_6_0
    //竖屏
    //return UIInterfaceOrientationMaskPortrait;
    //横屏
    //return UIInterfaceOrientationMaskLandscapeRight;
#endif
}
- (UIInterfaceOrientation)preferredInterfaceOrientationForPresentation
{
    //竖屏
    //return UIInterfaceOrientationPortrait;
    //横屏
    //return UIInterfaceOrientationLandscapeRight;


Changing the Device Orientation property to Landscape Right is pictured:

CrossApp screen fit scheme

Android method:


Android Manifest .xml the android:screenOrientation property in the app.

"unspecified": The default is determined by the system. T he decision strategy is device - related, so different devices will have different display directions.

"landscape": horizontal display (longer than height)

Portrait: Vertical display (height ratio is longer than width)

"user": The user's current preferred direction

"Behind": in the same direction as the One city below the Actity (in the Actity stack)

"sensor": There are physical sensors to decide. I f the user rotates the device, the screen switches across the vertical screen.

"nosensor": Ignores the physical sensor so that it does not change as the user rotates the device (except for the "unsifiedpec" setting).