Abstract:
A screen adaptation method and apparatus. A client obtains a user interface data package from a server end and parses the user interface data packet to obtaining drawing information about each module and component; the modules of the user interface are arranged vertically and each module contains one or more components. According to the screen direction of the device where the client is located, the client acquires the display attributes of each component, and draws each component in the user interface according to said attributes and to a resource file required to be filled into each component.

Description:
FIELD OF THE INVENTION 
       [0001]    The present invention relates to a method for screen adaptation and apparatus thereof, which relates to terminal display technology. 
       PRIOR ART 
       [0002]    With development of mobile communication technology, more and more types of mobile device increases. Different mobile devices are different in operating system and screen size. 
         [0003]    In prior art, primary layer differences among operating systems can be shielded by mobile insert software technology, which realizes rapid developing of crossing-system. A client can be assured to be run in different systems with one set of UI (user interface) which is developed by a developer. 
         [0004]    The prior art has at least following disadvantages: due to different mobile devices, screen sizes of the devices are different; a developer requires to make different UI according to different screen sizes; the UI must be processed by resetting high-fidelity picture, slicing process, coding and testing so as to adapt different mobile devices, which lead to heavy working load of screen adaptation and low efficiency of screen adaptation. 
       SUMMARY OF THE INVENTION 
       [0005]    The object of the present invention is to provide a method for screen adaptation and a device thereof, by which workload of the screen adaptation is light and efficiency of the screen adaptation is high. 
         [0006]    Therefore, according to one aspect of the present invention, a method for screen adaptation is provided, which includes following steps: 
         [0007]    A1) obtaining, by a client, UI (user interface) data packet/package from a server, parsing the UI data packet, obtaining drawing information of respective modules and drawing information of respective components, the modules of the UI being arranged in vertical direction, each module containing one or a plurality of components; 
         [0008]    A2) determining, by the client, screen orientation of a device on which the client is, if the screen orientation is portrait screen, executing step A3; if the screen orientation is landscape screen, executing step A4; 
         [0009]    A3) setting, by the client, display width of respective modules to be screen width of the device, obtaining display width, display height and display coordinates of the respective components according to display width of the respective modules, the drawing information of the respective modules and the drawing information of the respective components; drawing the respective components according to the display width, display height and display coordinates of the respective components and resource files required to be filled in the respective components and executing step A5; 
         [0010]    A4) setting, by the client, the display width of the respective module to be screen height of the device, obtaining display width, display height and display coordinates of the respective components according to display width of the respective modules, the drawing information of the respective modules and the drawing information of the respective components; drawing the respective components according to the display width, display height and display coordinates of the respective components and resource files required to be filled in the respective components and executing step A5; and 
         [0011]    A5) monitoring, by the client, screen orientation of the device, going back to step A2 when detecting that screen orientation of the device changes. 
         [0012]    According to another aspect of the present invention, another method for screen adaptation is provided, which includes following steps: 
         [0013]    E1) obtaining, by the client, a UI data packet, parsing the UI data packet, obtaining drawing information of a global module and drawing information of respective components, 
         [0014]    E2) determining, by the client, screen orientation of a device on which the client is, if the screen orientation is portrait screen, executing step E3; if the screen orientation is landscape screen, executing step E4; 
         [0015]    E3) setting, by the client, display width of the global module to be screen width of the device, obtaining display height of the global module according to display width of the global module and drawing information of the global module, executing Step E5; 
         [0016]    E4) setting, by the client, the display height of the global module to be screen width of the device, obtaining the display width of the global module according to the display height of the global module and the drawing information of the global module, executing Step E5; 
         [0017]    E5) obtaining display width, display height and display coordinates of the respective components according to the display width of the global module, the display height of the global module, the drawing information of respective components; drawing the respective components according to the display width, display height and display coordinates of the respective components and resource files required to be filled in the respective components and executing Step E6; 
         [0018]    E6) monitoring, by the client, the screen orientation of the device, going back to Step E2 when detecting that screen orientation of the device changes. 
         [0019]    According to another aspect of the present invention, another method for screen adaptation is provided, which includes following steps: 
         [0020]    H1) obtaining, by a client, UI data packet from a server, parsing the UI data packet, obtaining drawing information of respective modules and drawing information of respective components; 
         [0021]    H2) according to screen size of a device on which the client is, drawing information of the respective modules and drawing information of the respective components, obtaining, by the client, portrait screen display information and landscape screen display information of the respective components; 
         [0022]    H3) determining, by the client, screen orientation of a device on which the client is, if the screen orientation is portrait screen, executing step H4; if the screen orientation is landscape screen, executing step H5; 
         [0023]    H4) drawing, by the client, the respective components according to the portrait screen display information of the respective components and executing step H6; 
         [0024]    H5) drawing, by the client, the respective components according to the landscape screen display information of the respective components and executing step H6 
         [0025]    H6) monitoring, by the client, screen orientation of the device, going back to step H7 when detecting that screen orientation of the device changes; 
         [0026]    H7) determining, by the client, the screen orientation of the device on which the client is, if the screen orientation is portrait screen, executing Step H8; if the screen orientation is landscape screen, executing step H9; 
         [0027]    H8) drawing, by the client, the respective components according to the portrait screen display information of the respective components, executing step H6; and 
         [0028]    H9) drawing, by the client, the respective components according to the landscape screen display information of the respective components, executing step H6. 
         [0029]    The advantages of the present invention at least include that: UI is drawn according to screen size and screen orientation of the device, the drawing information of the respective components in UI so that screen adaptation and landscape-portrait screen switching is performed among different screen sizes of the device, which improves smoothness, reduces workload of screen adaptation and improves screen adaptation efficiency. 
     
    
     
       BRIEF DESCRIPTION OF THE ACCOMPANYING DRAWINGS 
         [0030]      FIG. 1  is a flow diagram of a method for screen adaptation of Embodiment 1 of the present invention; 
           [0031]      FIG. 2  is a flow diagram of another method for screen adaptation of Embodiment 2 of the present invention; 
           [0032]      FIG. 3  is a flow diagram showing that a client obtains and stores portrait screen display information of respective components of UI in embodiments of the present invention; 
           [0033]      FIG. 4  is a flow diagram showing that the client obtains and stores landscape screen display information of respective components of UI in embodiments of the present invention; and 
           [0034]      FIG. 5  is a flow diagram of another method for screen adaptation of Embodiment 3 of the present invention. 
       
    
    
     DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENTS 
       [0035]    The technical solutions of the embodiments of the disclosure are described clearly and completely in conjunction with the accompanying drawings as follows. Apparently, the described embodiments are merely a part of but not all of the embodiments according to the disclosure. Based on the described embodiments of the disclosure, other embodiments obtained by those skilled in the art without any creative work belong to the scope of the disclosure. 
         [0036]    The present invention is applied to a system including a server and a client; the client installed on a device is configured to draw UI on the device; UI can be divided into a plurality of modules; the modules are arranged vertically; each module includes one or more components. The server generates and stores a UI packet; and the UI packet includes drawing information of respective modules and drawing information of respective components of the modules. 
         [0037]    Correspondingly, the client obtains the UI packet, parses the UI packet, obtains the drawing information of the respective modules and drawing information of the respective components and drawing UI according to the drawing information above. 
         [0038]    In this case, the drawing information of the module can be wide-height aspect ratio or height-wide aspect ratio of the module; the drawing information of the component includes relative coordinates of the component, relative width of the component and relative height of the component, and the relative coordinates of the component includes relative abscissa of the component and relative ordinate of the component. 
         [0039]    Correspondingly, the format of the drawing information of the component is: (relative abscissa of the component, relative ordinate of the component, relative width of the component and relative height of the component), the content of the drawing information can be represented in form of percentage. 
         [0040]    In each embodiment, a wide-height aspect ratio of the module is ratio between width of the module in a UI effective picture and height of the module in the UI effective picture, the height-width aspect ratio is ratio between height of the module in the UI effective picture and width of the module in the UI effective picture. The relative abscissa of the component is ratio between abscissa of a module to which the component belongs and the width of the module in the effective picture; the relative ordinate of the component is ratio between the ordinate of the module to which the component belongs and height of the module in the UI effective picture; the relative width of the component is the ratio between the width of the component in the UI effective picture and the width of the module, in which the component belongs, in the UI effective picture; the relative height of the component is ratio between the height of the component in the UI effective picture and the height of the component of the module, in which the component belongs, in the effective picture. 
         [0041]    In this case, the width of respective modules in the UI effective picture is total width of the UI effective picture; the abscissa of the component in the module is the left top corner of the component by taking the left top corner of the module as coordinate origin; the ordinate of the component in the module is the ordinate of the left top corner of the component by taking the left top corner of the module as coordinate origin. 
         [0042]    As shown in  FIG. 1 , a flow process diagram of the method for screen adaptation according to the present invention is provided. The method comprises following steps: 
         [0043]    Step  101 , the client initiates, obtains a UI data packet from the server, parses the UI packet, obtains drawing information of respective modules in the UI and drawing information of respective components. 
         [0044]    For example, the UI is divided into module 1, module 2 and module 3; in this case, module 1 includes component 1 and component 2; module 2 includes component 3; module 3 includes component 4, component 5 and component 6; the client parses the data UI packet and obtains drawing information (width-height aspect ratio) of the module 1, module 2 and module 3 which are respectively 40%, 30% and 30%, the drawing information of component 1 (20%, 10%, 70%, 30%), the drawing information of component 2 (20%, 50%, 70%, 40%) and drawing information of component 3 (20%, 10%, 70%, 80%), drawing information of component 4 (10%, 10%, 40%, 90%), drawing information of component 5 (60%, 10%, 30%, 30%) and drawing information of component 6 (60%, 60%, 30%, 40%). 
         [0045]    Step  102 , the client obtains attribution information of the device. 
         [0046]    In this case, the attribution information of the device includes information such as type information, screen size, screen orientation and screen resolution, etc. of the device; the screen size includes screen width and screen height. 
         [0047]    In Embodiment 1, the client can invoke function UI_USER_INTERFACE_IDIOM to obtain type information of the device, takes value of size attribution in [UIScreen mainScreen] bounds as screen size of the device; invokes function of UIInterfaceOrientationIsPortrait in order to obtain screen orientation of the device; takes value of size attribution in [UIScreen mainScreen] currentMode as screen resolution of the device. 
         [0048]    For example, the type information of the device is “iPhone4”, the screen size of the device is 251 pt*141 pt; the screen orientation of the device is landscape, the screen resolution is 1136 px*640 px. 
         [0049]    Step  103 , the client determines whether the device is preset type device, if yes, execute Step  104 ; if no, execute Step  121 . 
         [0050]    Specifically, the client can determine that whether the device is preset type device according to type information of the device; in this case, the prest type device can be a cellphone. 
         [0051]    For example, the type information of the device is “iPhone4”, the client can determine that the device is cellphone. 
         [0052]    Step  104 , the client selects the module on the top of UI as the current module, sets the display width of the current module as screen width of the device, sets the display coordinates of the current module as left top corner of the device screen. 
         [0053]    For example, the screen size of the device is 251 pt*141 pt; when the left top corner of the device screen is coordinate origin, the client selects module 1 on the top of UI as the current module, sets the display width of the current module as 141 pt, sets the display coordinate of the current module as (0,0). 
         [0054]    Step  105 , the client obtains the display height of the current module according to the drawing information and display width of the current module. 
         [0055]    Specifically, when the drawing information of the current module is width-height aspect ratio, the client can obtain a result of dividing the display width of the current module by the width-height aspect ratio of the current module, take the result as the display height of the current module; when the drawing information of the current module is height-width aspect ratio, the client can obtain a result of multiplying the display width of the current module by the height-width ratio of the current module, taking the result as the height of the current module. 
         [0056]    For example, the drawing information of the current module is width-height aspect ratio; the width-height aspect ratio is 40%; the display width of the current module is 141 pt; the display height of the current module calculated by the client=141 pt/40%=352.5 pt. 
         [0057]    Step  106 , the client selects a component which is not drawn as the current component, obtains the display width, display height and display coordinates of the current component according to the display width, display height and the drawing information of the current component. 
         [0058]    In this case, the display coordinates of the current component is coordinates of the left top corner of the current component, which include the display ordinate and the display abscissa of the current component, by taking the left top corner of the current module as coordinate origin. 
         [0059]    Correspondingly, the client can obtain a product of display width of the current module and relative width of the current component, take the product as the display width of the current component, obtain a product of the display height of the current module and the relative height of the current component, take the product as the display height of the current component; obtain a product of the display width of the current module and the relative abscissa of the current component, take the product as the display abscissa of the current component; obtain a product of display height of the current module and relative ordinate of the current component, take the product as the display ordinate of the current component. 
         [0060]    For example, the client selects component 1 of the current module as the current component, the display width of the current module is 141 pt; the display height of the current module is 352.5 pt; the display coordinates of the current module is (0, 0); the drawing information of the current component is (20%, 10%, 70%, 30%); the display width of the current component calculated by the client=70%*141 pt=98.7 pt; the calculated display height of the current component=30%*352.5 pt=105.75 pt; the calculated display abscissa of the current component=20%*141 pt=28.2 pt; the calculated display ordinate of the current component=10%*352.5 pt=35.25 pt. 
         [0061]    Step  107 , the client determines whether a picture is required to be filled in the current component, if yes, execute Step  109 ; otherwise, execute Step  108 . 
         [0062]    Specifically, the client can determine whether the content of the current component includes picture information, if yes, that the picture is required to be filled in the current component; if no, that the picture is not required to be filled in the current component is determined. 
         [0063]    For example, the name of the current component is Label; the content of the component includes following information: Label.Pic=@“demo.png”; the client determines that the content of the current component includes picture information “demo.png”. 
         [0064]    Step  108 , the client obtains resource file of the current component required to be filled in the current component according to the content of the current component; and draws the current component according to the obtained resource file and the display width, display height and display coordinates of the current component, then execute Step  118 . 
         [0065]    Specifically, the client can take the left top corner of the current module as coordinate origin, locate the current component according to the display width, display height and display coordinates and fill the obtained resource file in the current component, display the current component and implement drawing of the current component. 
         [0066]    In this case, the resource file can be files such as video, words, etc. 
         [0067]    Step  109 , the client determines whether screen density of the device is more than a preset density value, if yes, executes Step  110 ; otherwise, execute Step  114 . 
         [0068]    Specifically, the client can obtain screen density of the device directly and determine whether the screen density of the device is more than a preset density value; the client can also obtain screen resolution and screen size of the device, obtain screen density of the device according to the screen resolution and the screen size of the device and determine whether the screen density of the device is more than the preset density value. 
         [0069]    In the Embodiment 1, the client can calculate screen density PPI of the device according to following formula: 
         [0000]    
       
         
           
             PPI 
             = 
             
               
                 dp 
                 di 
               
               = 
               
                 
                   
                     
                       wp 
                       2 
                     
                     + 
                     
                       hp 
                       2 
                     
                   
                 
                 di 
               
             
           
         
       
     
         [0070]    In the formula, dp is resolution of screen diagonal of the device, wp is screen lateral resolution of the device, hp is screen vertical resolution of the device, di is length of screen diagonal of the device. 
         [0071]    For example, when the screen resolution of the device is 1136 px*640 px, the screen size of the device is 251 pt*141 pt and the preset density value is 300 ppi, the client calculates out that the size density of the device is 326 ppi according to the screen resolution and screen size of the device and determines that the screen desity of the device is more than the preset density value. 
         [0072]    Step  110 , the client obtains a corresponding high resolution picture according to content of the current component. 
         [0073]    Specifically, the client can obtain the high resolution picture, which is corresponding to information of the picture, from a locally stored material package or by network asynchronously; the client can generate the high resolution picture, which is corresponding to information of the picture dynamically. 
         [0074]    In the Embodiment 1, the locally stored material package can store a high resolution picture and a low resolution picture which are correspond to a same picture information. 
         [0075]    For example, the content of the current component includes picture information “demo.png”; the locally stored material package stores the high resolution picture “demo@2x.png” and the low resolution picture ““demo.png” which are corresponding to “demo.png”; the client obtains the high resolution picture “demo@2x.png” from the locally stored material package. 
         [0076]    Step  111 , the client determines whether other resource files required to be filled in the current component except for the picture, if yes, execute Step  113 ; otherwise, execute Step  112 . 
         [0077]    Specifically, the client can determine whether the content of the current component includes information of other picture information except for the information of the picture; if yes, the client determines that other source files are required to be filled in the current component except for the picture; otherwise, the client determines that other source files are not required to be filled in the current component except for the picture. 
         [0078]    Step  112 , the client draws the current component according to the obtained high resolution picture, the display width, the display height and the display coordinates of the current component; execute Step  118 . 
         [0079]    Specifically, the client can take the left top corner of the current module and locate the current component according to the display width, display height and display coordinates of the current component, and fill the obtained high resolution picture in the current component, display the current component so as to implement the drawing of the current component. 
         [0080]    For example, the display coordinates of the current component is (28.2, 35.25), the display width is 98.7 pt, the display height is 105.75 pt; the client obtains the high resolution picture “demo@2x.png” of the current component required to be filled in the current component, generates component with size of (98.7, 105.75) at position of coordinates of (28.2, 35.25) and fills the high resolution picture “demo@2x.png” in the component. 
         [0081]    Step  113 , the client obtains other resource files except for the picture according to the content of the current component, draws the current component according to the display width, display height and display coordinates of the current component, the obtained high resolution picture and other resource files except for the picture; execute Step  118 . 
         [0082]    Specifically, the client can take the left top corner of the current module as coordinate origin, locate the current component according to the display width, display height and display coordinates of the current component, fill the obtained high resolution picture and other resource files in the current component, display the current component so as to draw the current component. 
         [0083]    Step  114 , the client obtains a corresponding low resolution picture according to the content of the current component. 
         [0084]    Specifically, the client can obtain the low resolution picture, which is corresponding to information of the picture, from a locally stored material package or by network asynchronously; the client can dynamically generate the low resolution picture, which is corresponding to information of the picture. 
         [0085]    In Embodiment 1, the locally stored material package can store the high resolution picture and the low resolution picture, which are corresponding to the same picture information. 
         [0086]    For example, the content of the current component includes picture information “demo.png”; the locally stored material package stores the high resolution picture “demo@2x.png” and the low resolution picture “demo.png” which are corresponding to “demo.png”; the client obtains the low resolution picture “demo@2x.png” from the locally stored material package. 
         [0087]    Step  115 , the client determines whether other resource files are required to be filled in the current component except for the current component, if yes, execute Step  117 ; otherwise, execute Step  116 . 
         [0088]    Step  116 , the client draws the current component according to the obtained low resolution picture, the display width, the display height and the display coordinates of the current component; execute Step  118 . 
         [0089]    Specifically, the client can take the left top corner of the current module and locate the current component according to the display width, display height and display coordinates of the current component, and fill the obtained low resolution picture in the current component, display the current component so as to implement the drawing of the current component. 
         [0090]    Step  117 , the client obtains other resource files except for the picture according to the content of the current component, draws the current component according to the display width, display height and display coordinates of the current component, the obtained low resolution picture and other resource files except for the picture; execute Step  118 . 
         [0091]    Specifically, the client can take the left top corner of the current module as coordinate origin, locate the current component according to the display width, display height and display coordinates of the current component, fill the obtained high resolution picture and other resource files in the current component, display the current component, so as to draw the current component. 
         [0092]    Step  118 , the client determines whether the current module includes the component, which is not drawn, if yes, go back to Step  106 ; otherwise, execute Step  119 . 
         [0093]    Step  119 , the client determines whether UI includes the unprocessed module, if yes, execute Step  120 ; otherwise, execute Step  139 . 
         [0094]    Step  120 , the client obtains a result of adding the display ordinate of the current module to the display height of the current module, select a module, which is adjacent to the current module and located below the current module, as a updated current module in the UI, sets the display ordinate of the updated current module to be the result, sets the display abscissa of the updated current module to be zero, sets the display width of the updated current module to be the screen width of the device, go back to Step  105 . 
         [0095]    For example, when the screen size of the device is 251 pt*141 pt, the current module is module 1, the display coordinates of the current module is (0, 0) and the display height of the current module is 352.5 pt, the client obtains a result of adding the display ordinate of the current module to the display height of the current module, i.e. 0+352.5 pt=352.5 pt, selects module 2, which is adjacent to module 1 and below to the module 1, in the UI as the updated current module, sets the display coordinates of the updated current module to be (0, 352.5 pt) and sets the display width of the updated current module to be 141 pt. 
         [0096]    Step  121 , the client determines orientation of the device, if the screen orientation is portrait screen, go back to Step  104 ; if the screen orientation is landscape screen, execute Step  122 . 
         [0097]    Step  122 , the client select the module on the top of the UI, sets the display width of the current module to be screen height of the device and sets the display coordinates of the current module to be left top corner of the device screen. 
         [0098]    For example, when the screen size of the device is 251 pt*141 pt and the left top corner of the device screen is coordinate origin, the client selects module 1 on the top of the UI as the current module, sets the display width of the current module to be 251 pt and sets the display coordinates of the current module to be (0, 0). 
         [0099]    Step  123 , the client obtains the display height of the current module according to the drawing information and the display width of the current module. 
         [0100]    Step  124 , the client selects a component, which is not drawn, as the current component from the current module, obtains the display width, display height and display coordinates of the current component according to the display width and display height of the current module and the drawing information of the current component. 
         [0101]    Step  125 , the client determines whether requires to fill a picture in the current component, if yes, execute Step  127 ; otherwise, execute Step  126 . 
         [0102]    Step  126 , the client obtains a resource file required to be filled in the current component according to the content of the current component, and draws the current component according to the obtained resource file and the display width, display height and display coordinates of the current component; execute Step  136 . 
         [0103]    Step  127 , the client determines whether the screen density of the device is more than a preset density value, if yes, execute Step  128 ; otherwise, execute Step  132 . 
         [0104]    Step  128 , the client obtains a corresponding high resolution picture according to the content of the current component. 
         [0105]    Step  129 , the client determines whether other resource files are required to be filled in the current component except for the picture, if yes, execute Step  131 ; otherwise, execute Step  130 . 
         [0106]    Step  130 , the client draws the current component according to the obtained high resolution picture, the display width, display height and display coordinates of the current component; execute Step  136 . 
         [0107]    Step  131 , the client obtains other resource file except for the picture according to the content of the current component, draws the current component according to the display width, display height and display coordinates of the current component, the obtained high resolution picture and other resource files except for the picture; execute Step  136 . 
         [0108]    Step  132 , the client obtains a corresponding low resolution picture according to the content of the current component. 
         [0109]    Step  133 , the client determines whether other resource files except for the picture are required to be filled in the current component, if yes, execute Step  135 ; otherwise, execute Step  134 . 
         [0110]    Step  134 , the client draws the current component according to the obtained low resolution picture, the display width, display height and display coordinates of the current component; execute Step  136 . 
         [0111]    Step  135 , the clients obtains other resource files except for the picture according to the content of the current component, draws the current component according to the display width, display height and display coordinates of the current component, the obtained low resolution picture and other resource files except for the picture; execute Step  136 . 
         [0112]    Step  136 , the client determines whether the current module includes a component, which is not drawn, if yes, execute Step  124 ; otherwise, execute Step  137 . 
         [0113]    Step  137 , the client determines whether UI includes an unprocessed module, if yes, execute Step  138 ; otherwise, execute Step  139 . 
         [0114]    Step  138 , the client obtains a result of adding the display ordinate of the current module to the display height of the current module, select a module, which is adjacent to the current module and located below the current module, as a updated current module in the UI, sets the display ordinate of the updated current module to be the result, sets the display abscissa of the updated current module to be zero, sets the display height of the updated current module to be the screen width of the device, then goes back to Step  123 . 
         [0115]    Step  139 , the client monitors the screen orientation of the device. 
         [0116]    Step  140 , the client determines whether the screen orientation of the device changes, if yes, go back to Step  121 ; otherwise, go back to Step  139 . 
         [0117]    In Embodiment 1, the client draws UI according to screen size and screen orientation of the device, the drawing information of the respective components in UI so that screen adaptation and landscape-portrait screen switching is performed among different screen sizes of the device, which improves smoothness, reduces workload of screen adaption and improves screen adaption efficiency. 
         [0118]    In other embodiments of the present invention, the client can obtain and store the portrait screen display information and landscape screen display information of respective components at backend in advance, select corresponding display information according to screen orientation of the device, draw the respective components in the UI according to the selected display information. 
         [0119]    As shown in  FIG. 2 , a flow diagram for another method for screen adaption of the present invention is provided, which includes: 
         [0120]    Step  201 , the client initiates, obtains a UI data packet from the server, parses the UI data packet and obtains drawing information of respective modules and drawing information of respective components in the UI. 
         [0121]    In this case, the drawing information of the module can be width-height aspect ratio or height-width aspect ratio of the module, the drawing information of the component includes relative coordinates of the component, relative width of the component and relative height of the component; the relative coordinate of the component includes relative abscissa coordinates and relative ordinate of the component. 
         [0122]    Step  202 , the client obtains screen size and screen orientation of the device. 
         [0123]    In this case, the screen size includes screen width and screen height. 
         [0124]    Step  203 , the client obtains and stores portrait screen display coordinates and landscape screen display coordinates of respective modules and portrait screen display information and landscape display information of respective components according to the screen size of the device, the drawing information of respective modules and the drawing information of respective components in the UI. 
         [0125]    In this case, the portrait display information of the component includes portrait screen display coordinates of the component, the portrait screen display width of the component and the portrait screen display height of the component; the portrait screen display coordinates of the component includes portrait screen display abscissa of the component and portrait screen display ordinate of the component; the landscape screen display information of the component includes landscape screen display coordinates of the component, the landscape display width of the component and the landscape screen display height of the component; the landscape screen display coordinates of the component includes landscape screen display abscissa of the component and landscape screen display ordinates of the component. 
         [0126]    Step  204 , the client determines screen orientation of the device, if the screen orientation is portrait screen, execute Step  205 ; if the screen orientation is landscape screen, execute Step  206 . 
         [0127]    Step  205 , the client draws UI according to the portrait screen display coordinates of respective modules and portrait screen display information of the respective components, execute Step  207 . 
         [0128]    Specifically, the client can take the left top corner of a module, to which respective components belongs, as coordinate origin, locate the respective components according to the portrait screen display width, portrait screen display height and portrait screen display coordinates of respective components, fill the corresponding resource file in respective components, display respective components so as to realize drawing of UI. 
         [0129]    Step  206 , the client draws the UI according to the landscape screen display coordinates and the landscape screen display information of respective components; execute Step  207 . 
         [0130]    Specifically, the client can take the left top corner of a module, to which respective components belongs, as coordinate origin, locate the respective components according to the landscape screen display width, landscape screen display height and landscape screen display coordinates of the respective components, fill the corresponding resource file in the respective components, display the respective components so as to realize drawing of UI. 
         [0131]    Step  207 , the client monitors screen orientation of the device and the component attribution information of the respective components; when the component attribution information changes, execute Step  208 ; when the screen orientation of the device changes, execute Step  209 . 
         [0132]    Step  208 , the client stores the changed component attribution information; go back to Step  207 . 
         [0133]    For example, when the user enters “123” in an input box of UI, the client monitors that the content attribution of input box component changes and stores the content attribution “123”. 
         [0134]    Step  209 , the client determines the screen orientation of the device, if the screen orientation is portrait screen, execute Step  210 ; and if the screen orientation is landscape screen, execute Step  213 . 
         [0135]    Step  210 , the client draws the UI according to the portrait screen display coordinates of respective modules and the portrait screen display information of the respective components. 
         [0136]    Step  211 , the client determines whether the component attribution information is stored by itself, if yes, execute Step  212 ; otherwise, execute Step  207 . 
         [0137]    Step  212 , the client modifies attribution of the corresponding component according to the component attribution information stored by itself; go back to Step  207 . 
         [0138]    For example, when the client has stored content attribution “123” of the input box component, the client modified the content attribution of the corresponding input box component to be “123”. 
         [0139]    Step  213 , the client draws the UI according to the landscape screen display coordinates of respective modules and the landscape screen display information of the respective components; go back to Step  211 . 
         [0140]    In Embodiment 2, the user interface can includes a plurality of modules and respective modules in the user interface are arranged vertically, each module includes one or a plurality of components; the portrait display information of the respective components includes the portrait screen display width, portrait screen display height and portrait screen display coordinates of the respective components; the landscape display information of the respective components includes the landscape screen display width, landscape screen display height and landscape screen display coordinates of the respective components. 
         [0141]    Correspondingly, in above process, operation that the client obtains and stores the portrait screen display information of the respective components can be detailed as shown in flow diagram of  FIG. 3 , which includes the following steps: 
         [0142]    Step  301 , the client selects the module on the top of the UI as the current module, sets the portrait display width of the current module to be screen width of the device, takes the portrait screen display coordinates of the current module to be the left top corner of the device screen and stores the portrait screen display coordinates of the current module. 
         [0143]    Step  302 , the client obtains the portrait screen display height of the current module according to the current drawing information and portrait display width of the current module. 
         [0144]    Specifically, when the drawing information of the current module is width-height aspect ratio, the client can obtain a result got by dividing the portrait screen display width of the current module by the width-height aspect ratio of the current module; when the drawing information of the current module is height-width aspect ratio, the client can obtain a result got by multiplying the portrait screen display width of the current module with the height-width aspect ratio of the current module, takes the result as the portrait screen display height of the current module. 
         [0145]    Step  303 , the client obtains and stores the portrait screen display width, portrait screen display height and portrait screen display coordinates of the respective components in the current module according to the portrait screen display width and portrait screen display height of the current module and drawing information of the respective components in the current module. 
         [0146]    Specifically, the client obtains respective products of the portrait screen display width of the current module and relative width of respective components in the current module, takes the obtained products as portrait screen display width of respective components; the client obtains respective products of the portrait screen display height of the current module and relative height of respective components in the current module, takes the obtained products as portrait screen display height of respective components in the current module; the client obtains products of the portrait screen display width of the current module and the relative abscissas of respective components in the current module, takes the obtained products as portrait screen display abscissas of respective components in the current module; the client obtains products of the portrait screen display height of the current module and the relative ordinates of respective components in the current module, takes the obtained products as portrait screen display ordinates of respective components. 
         [0147]    Step  304 , the client determines whether UI includes an unprocessed module, if yes, execute Step  305 ; otherwise, obtaining portrait screen display information is determined to be completed. 
         [0148]    Step  305 , the client obtains a result of adding the portrait screen display ordinate of the current module to the portrait screen display height of the current module, selects a module, which is adjacent to the current module and located below the current module, as a updated current module in the UI, sets the portrait screen display ordinate of the updated current module to be the result, sets the portrait screen display abscissa of the updated current module to be zero, sets the portrait screen display width of the updated current module to be the screen width of the device, go back to Step  302 . 
         [0149]    Correspondingly, operation that the client obtains and stores operation of landscape screen display information of the respective components in the UI can be detailed as shown in flow diagram of  FIG. 4 , which includes the following steps: 
         [0150]    Step  401 , the client selects the module on the top of UI as the current module, sets the landscape screen display width of the current module to be the screen height of the device and sets the landscape screen display coordinates of the current module as left top corner of the device screen. 
         [0151]    Step  402 , the client obtains the landscape display height of the current module according to the drawing information and landscape screen display width of the current module. 
         [0152]    Specifically, when the drawing information of the current module is width-height aspect ratio, the client can obtain a result of dividing the landscape screen display width of the current module by the width-height aspect ratio of the current module and takes the result as the landscape screen display height of the current module; when the drawing information of the current module is height-width aspect ratio, the client obtains a result of multiplying the landscape screen display width of the current module by the height-width aspect ratio of the current module and takes the result as the landscape display height of the current module. 
         [0153]    Step  403 , the client obtains and stores the landscape screen display width, landscape display height and landscape display coordinates of respective components in the current module according to the landscape screen display width and landscape screen display height of the current module and the drawing information of the respective components of the current module. 
         [0154]    Specifically, the client obtains respective products of the landscape screen display width of the current module and relative width of respective components in the current module, takes the obtained products as landscape screen display width of respective components; the client obtains respective products of the landscape screen display height of the current module and relative height of respective components in the current module, takes the obtained products as landscape screen display height of respective components in the current module; the client obtains products of the landscape screen display width of the current module and the relative abscissas of respective components in the current module, takes the obtained products as landscape screen display abscissas of respective components in the current module; the client obtains products of the landscape screen display height of the current module and the relative ordinates of respective components in the current module, and takes the obtained products as landscape screen display ordinates of respective components. 
         [0155]    Step  404 , the client determines whether UI includes an unprocessed module, if yes, execute Step  405 ; otherwise, obtaining landscape screen display information is determined to be completed. 
         [0156]    Step  405 , the client obtains a result of adding the landscape screen display ordinate of the current module to the landscape screen display height of the current module, selects a module, which is adjacent to the current module and located below the current module, as an updated current module in the UI, sets the landscape screen display ordinate of the updated current module to be the result, sets the landscape screen display abscissa of the updated current module to be zero, sets the landscape screen display width of the updated current module to be the screen height of the device, go back to Step  402 . 
         [0157]    In the present embodiment, the client obtains and stores portrait screen display information and landscape screen display information according to the screen size of the device and drawing information of the respective components in the UI, uses the portrait screen display information or the landscape screen display information to draw the respective components according screen orientation of the device, so that screen adaptation and landscape-portrait screen switching is performed among different screen sizes of the device, which improves smoothness of screen adaptation and landscape-portrait screen switching, reduces workload of screen adaptation and improves screen adaptation efficiency. 
         [0158]    It should be noted that, in other embodiments of the present invention, the UI further can includes only one global module; the global module includes all components in the UI. The server generates and stores the UI which includes drawing information of global module and the drawing information of the respective components in the global module. 
         [0159]    In this case, the drawing information of the global module can be width-height aspect ratio or height-width aspect ratio of the global module. The drawing information of the component includes the relative coordinates of the component, the relative width of the component and the relative height of the component; the relative coordinates of the component include the relative abscissa of the component and the relative ordinate of the component. 
         [0160]    In the present embodiment, the width-height aspect ratio of the global module is ratio between the width of the global module in the UI effective picture and the height of the global module in the UI effective picture; the height-width aspect ratio of the global module is ratio between the height of the global module in the UI effective picture and the width of the global module in the UI effective picture. The relative abscissa of the component is ratio between the abscissa of the component in the global module and the width of the global module in the UI effective picture; the relative ordinate of the component is ratio between the ordinate of the component in the global module and the height of the global module in the UI effective picture; the relative width of the component is the ratio between the width of the component in the UI effective picture and the width of the global module in the UI effective picture; and the relative height of the component is ratio between the height of the component in the UI effective picture and the height of the global module in the UI effective picture. 
         [0161]    In this case, the width of the global module in the UI effective picture is total width of the UI effective picture; the height of the global module in the UI effective picture is total height of the UI effective picture; the abscissa of the component in the global module is abscissa of the left top corner of the component by taking the left top corner of the global module as coordinate origin; the ordinate of component in the global module is ordinate coordinate of the left top corner of the component by taking the left top corner of the global module as coordinate origin. 
         [0162]    Correspondingly, the embodiment of the present invention provides another method for screen adaptation. As shown in  FIG. 5 , the method includes the following steps. 
         [0163]    Step  501 , the client initiates, obtains a UI data packet from the server, parses the UI data packet and obtains drawing information of the global module and drawing information of the respective components in the UI. 
         [0164]    Step  502 , the client sets central point of global module to be the same as central point of UI view and sets the background of the UI view to be black. 
         [0165]    Specifically, the client can set the central point of global module to be the same as the central point of UI view by setting center attribution of the global module to be the same as center attribution of UI view; the client can set the background of the UI view to be black by setting Background attribution of the UI view to be a preset value, in which the preset value can be “Black Color”. 
         [0166]    Step  503 , the client obtains attribution information of the device. 
         [0167]    In this case, the attribution information of the device can includes type information, screen size, screen orientation, screen resolution, etc. of the device; the screen size includes screen width and screen height. 
         [0168]    Step  504 , the client determines the screen orientation of the device, if the screen orientation is portrait screen, execute Step  505 ; and if the screen orientation is landscape screen, execute Step  509 . 
         [0169]    Step  505 , the client determines the width-height aspect ratio of the global module according to the drawing information of the global module; if the width-height aspect ratio of the global module is less than screen width-height aspect ratio of the device, execute Step  506 ; if the width-height aspect ratio of the global module is equal to the screen width-height ratio of the device, execute Step  507 ; if the width-height aspect ratio of the global module is more than the screen width-height aspect ratio of the device, execute Step  508 . 
         [0170]    Step  506 , the client sets the display height of the global module as screen height of the device, obtains the display width of the global module according to the display height and drawing information of the global module; execute Step  513 . 
         [0171]    Step  507 , the client sets the display height of the global module as screen height of the device, sets the display width of the global module as screen width of the device; execute Step  513 . 
         [0172]    Step  508 , the client sets the display width of the global module as screen width of the device, obtains display height of the global module according to the display width and drawing information of the global module; execute Step  513 . 
         [0173]    Step  509 , the client determines the width-height aspect ratio of the global module according to the drawing information of the global module; if the width-height aspect ratio of the global module is less than the screen height-width aspect ratio of the device, execute Step  510 ; if the width-height aspect ratio of the global module is equal to the screen height-width aspect ratio of the device, execute Step  511 ; if the width-height aspect ratio of the global module is more than the screen height-width aspect ratio of the device, execute Step  512 . 
         [0174]    Step  510 , the client sets the display height of the global module as screen width of the device, and obtains the display width of the global module according to the display height and drawing information of the global module, obtains the display width of the global module; execute Step  513 . 
         [0175]    Step  511 , the client sets the display height of the global module as screen width of the device and sets the display width of the global module as screen height of the device; execute Step  513 . 
         [0176]    Step  512 , the client sets the display width of the global module as screen height of the device and obtains the display height of the global module according to the display width and drawing information of the global module; execute Step  513 . 
         [0177]    Step  513 , the client selects a component, which is not drawn, as the current component from the global module, obtains display width, display height and display coordinates of the current component according to the display width and display height of the global module and the drawing information of the current component. 
         [0178]    Step  514 , the client determines whether requires to fill a picture in the current component, if yes, execute Step  516 ; otherwise, execute Step  515 . 
         [0179]    Step  515 , the client obtains a resource file required to be filled in the current component according to the content of the current component, draws the current component according to the obtained resource file and the display width, display height and display coordinate of the current component; execute Step  525 . 
         [0180]    Step  516 , the client determines whether the screen density of the device is more than a preset density value, if yes, execute Step  517 ; otherwise, execute Step  521 . 
         [0181]    Step  517 , the client obtains a corresponding high resolution picture according to content of the current component. 
         [0182]    Step  518 , the client determines whether other resource files are required to be filled in the current component except for the picture; if yes, execute Step  520 ; otherwise, execute Step  519 . 
         [0183]    Step  519 , the client draws the current component according to the obtained high resolution picture, the display width, display height and display coordinates of the current component; execute Step  525 . 
         [0184]    Step  520 , the client obtains other resource files except for the picture according to the content of the current component, draws the current component according to the display width, display height and display coordinates of the current component, the obtained high resolution picture and other resource files except for the picture; execute Step  525 . 
         [0185]    Step  521 , the client obtains a corresponding low resolution picture according to the content of the current component. 
         [0186]    Step  522 , the client determines whether requires to fill other resource files in the current component except for the picture; if yes, execute Step  524 ; otherwise, execute Step  523 . 
         [0187]    Step  523 , the client draws the current component according to the obtained low resolution picture, the display width, display height and display coordinates of the current component, execute Step  525 . 
         [0188]    Step  524 , the client obtains other resource files except for the picture according to the content of the current component, draws the current component according to the display width, display height and display coordinates of the current component, and the obtained high resolution picture and other resource files except for the picture; execute Step  525 . 
         [0189]    Step  525 , the client determines whether the global module includes the component, which is not drawn, if yes, go back to the Step  513 ; otherwise, execute Step  526 . 
         [0190]    Step  526 , the client monitors the screen orientation of the device. 
         [0191]    Step  527 , the client determines whether the screen orientation of the device changes, if yes, go back to Step  504 ; otherwise, go back to Step  526 . 
         [0192]    In Embodiment 3, the client draws UI according to screen size and screen orientation of the device, the drawing information of the module and components in UI so that screen adaptation and landscape-portrait screen switching is performed among different screen sizes of the device, which improves smoothness, reduces workload of screen adaptation and improves screen adaptation efficiency and user experience according to pictures corresponding to screen density. 
         [0193]    It can be understood that all of or part of the steps in the above embodiments can be realized by hardware, a soft module executed by a processor or combination of both. The soft module can be stored in RAM (random-access memory), memory, ROM (read-only memory), electrically programmable read-only memory, electrically erasable programmable read-only memory, register, hard disc, mobile disc, CD-ROM (Compact Disc Read-Only Memory) or any other public known forms of storage media in the prior art. 
         [0194]    The described embodiments are only preferred embodiments of the application and the embodiments are not intended to limit the application. Any alteration or change easily obtained by those skilled in the art based on the application should fall in the scope of protection of the application.