The content of the invention
The technical problem to be solved in the present invention is, for prior art defect there is provided a kind of Web page type apply it is aobvious
Show adaptation method and device.
The technical solution adopted for the present invention to solve the technical problems is:A kind of display adaptation method of Web page type application,
Comprise the following steps:
S1:The virtual window for showing Web page is founded on mobile terminals, and the width of the virtual window is divided
Resolution is set to fixed value;
S2:Load Image, set the width resolution of the picture consistent with the width resolution of the virtual window, and
The width that equal proportion zooms to the picture is consistent with the width of the virtual window;
S3:The picture is arranged into background to show in the virtual window.
Preferably, the step S1 comprises the following steps:The difference of operating system, passes through according to used in mobile terminal
HTML5 api interface sets the virtual window of compatible different operating system in the mobile terminal, and by the virtual window
Width resolution be set to fixed value.
Preferably, the step S1 comprises the following steps:
S11:Whether the operating system that the mobile terminal is judged by HTML5 api interface is ANDROID systems;If
It is then to perform step S12;If it is not, then performing step S13;
S12:ANDROID2.3 system above is determined whether again, if so, described in then being founded in the mobile terminal
The width resolution of virtual window is set to fixed value, and maximum zoom and minimum zoom are set to the screen chi of the mobile terminal
Very little, screen pixels density is set to the mobile terminal screen picture element density;If not;Then by the institute founded in the mobile terminal
The width resolution for stating virtual window is set to fixed value, and it is close that screen pixels density is set to the mobile terminal screen pixel
Degree;
S13:The width resolution for the virtual window founded in the mobile terminal is set to fixed value, forbids using
Family manually adjusts scaling, and screen pixels density is set to the mobile terminal screen picture element density.
Preferably, the step S2 includes:Judge the width resolution of the picture and the width point of the virtual window
Whether resolution is consistent, if unanimously, the picture equal proportion directly to be zoomed to the width of picture and the width of the virtual window
Degree is consistent;If inconsistent, the width resolution for adjusting the picture is consistent with the width resolution of the virtual window, then will
The width that the picture equal proportion zooms to picture is consistent with the width of the virtual window.
Preferably, the step S3 includes:The attribute of the picture is set in display by HTML5 api interface
During be arranged to background and only show once, and judge whether the height of the picture is more than the height of virtual window;If so,
Then by the picture in the virtual window local display;If it is not, then the picture is directly displayed in virtual window.
Preferably, described " local display in the virtual window by the picture " includes:The picture is placed on
The upper left corner, the upper right corner, the lower left corner or the lower right corner of the virtual window, show portion of the picture within the virtual window
Point.
The present invention also provides a kind of display adaptive device of Web page type application, including:
Window setting unit:For founding the virtual window for showing Web page on mobile terminals, and by the void
The width resolution for intending window is set to fixed value;
Picture loading unit:For Loading Image, the width resolution of the picture and the width of the virtual window are set
Spend that resolution ratio is consistent, and equal proportion zoom to the picture width it is consistent with the width of the virtual window;
Show adaptation unit:Shown for the picture to be arranged into background in the virtual window.
Preferably, the window setting unit includes:The difference of operating system, passes through according to used in mobile terminal
HTML5 api interface sets the virtual window of compatible different operating system in the mobile terminal, and by the virtual window
Width resolution be set to fixed value.
Preferably, the picture loading unit includes:Judge the width resolution and the virtual window of the picture
Whether width resolution is consistent, if unanimously, the picture equal proportion directly to be zoomed to the width and the virtual window of picture
The width of mouth is consistent;If inconsistent, the width resolution of the picture and the width resolution one of the virtual window are adjusted
Cause, then the width that the picture equal proportion is zoomed into picture is consistent with the width of the virtual window.
Preferably, the display adaptation unit includes:The attribute of the picture is set to by HTML5 api interface
It is arranged to background during display and only shows once, and judges whether the height of the picture is more than the height of virtual window
Degree;If so, then by the picture in the virtual window local display;If it is not, then by the picture in virtual window it is straight
Connect display.
The present invention has the following advantages that compared with prior art:The display adaptation side of Web page type application provided by the present invention
Method and device, by founding the virtual window that width resolution is fixed value in the terminal, to show Web page, it is ensured that
Web page is shown unanimously in the Web page type application of mobile terminal, is not in page metaboly;Load Image and picture is set
Width resolution is consistent with the width resolution of virtual window, and width is consistent with the width of virtual window, then picture is arranged to
Background is shown, so as to ensure that picture shows that process will not metamorphopsic distortion, influence Consumer's Experience.
Embodiment
In order to which technical characteristic, purpose and effect to the present invention are more clearly understood from, now compare accompanying drawing and describe in detail
The embodiment of the present invention.
Fig. 1 shows the display adaptation method that Web page type is applied in one embodiment of the invention.This method comprises the following steps:
S1:Found the virtual window for showing Web page on mobile terminals, and by the width resolution of virtual window
It is set to fixed value.Specifically, according to used in mobile terminal operating system difference, moved by HTML5 api interface
The virtual window of compatible different operating system is set in dynamic terminal, and the width resolution of virtual window is set to fixed value,
Ensure Web page display consistency in the Web page type application of mobile terminal, it is to avoid page metaboly occur.It is to be appreciated that
The Web page type application is using on mobile terminals without downloading, searching Web page type APP i.e., such as LiveApp application.
It is to be appreciated that founding the virtual window of compatible different operating system in the terminal using HTML5 api interface
Mouthful, its compatibility is strong, is applicable to include and is not limited to smart mobile phone, the mobile terminal such as tablet personal computer, PAD.Specifically, it can lead to
Cross the compatibility issue that code below solves mobile terminal, it is to avoid because PC is different from the resolution ratio of mobile terminal, cause moving
The page in Web page type application in dynamic terminal occurs elongating or the metaboly such as shortens.
<Script type=" text/javascript ">;
Var phoneWidth=parseInt (window.screen.width);
Var phoneScale=phoneWidth/640.
It is to be appreciated that the above-mentioned code to ensure mobile terminal compatibility issue uses java language, main application
In the compatibility issue of ANDROID systems, it need to be used for IOS systems, Symbian system, Windows phone7 systems
The program code that corresponding development language is write.
S11:Whether the operating system that mobile terminal is judged by HTML5 api interface is ANDROID systems;If so, then
Perform step S12;If it is not, then performing step S13.Specifically, step S11 can by code if (/Android (and d+ d
+)/.text (navigator.userAgent) judged.
S12:On the premise of the operating system of mobile terminal is ANDROID systems, then determine whether ANDROID2.3
System above, if so, the width resolution for the virtual window founded in mobile terminal is then set to fixed value, it is virtual to avoid
The Web page facial disfigurement shown in window;Virtual window maximum zoom and minimum zoom are set to the screen size of mobile terminal, make
Virtual window big I equal proportion zoom to it is consistent with the screen size of mobile terminal so that the shifting of different screen size
The content in Web page shown in dynamic terminal is consistent, it is to avoid because of the Web page of different sizes for causing display of screen size
The inconsistent phenomenon of content occurs;The screen pixels density of virtual window is set to the screen pixels density of mobile terminal, so that
Avoid the Web page that is shown in virtual window because the screen pixels of the mobile terminal of different screen size are different and auto zoom,
So as to cause Web page display distortion.It is to be appreciated that in ANDROID2.3 system above, the virtual window founded
Width resolution is fixed value, and big I is voluntarily adjusted with the actual screen size of mobile terminal, is shown in virtual window
Web page can be shown according to the screen pixels density of current mobile terminal, to ensure the Web shown in different mobile terminal
The uniformity of the page, improves user experience.Specifically, above-mentioned functions can be realized by code below:
if(version>2.3){document.write('<Meta name=" viewport " content=" width
=640, minimum-scale='+phoneScale+', max imum-scale='+phoneScale+', target-
Densitydpi=device-dp i ">');}.
In below ANDROID2.3 systems, the width resolution for the virtual window founded in mobile terminal is set to solid
Definite value, to avoid the Web page facial disfigurement shown in virtual window;It is close that screen pixels density is set to mobile terminal screen pixel
Degree, to avoid the Web page distortion shown in virtual window.Specifically, look into and above-mentioned functions are realized by code below:
document.write('<Meta name=" viewport " content=" width=640, target-
Densitydpi=device-dpi ">').
S13:In non-ANDROID systems, the width resolution for the virtual window founded in mobile terminal is set to solid
Definite value, to avoid the Web page facial disfigurement shown in virtual window;User is forbidden to manually adjust scaling, screen pixels density is set
For mobile terminal screen picture element density, to avoid the Web page distortion shown in virtual window.Specifically, following generation can be passed through
Code realizes above-mentioned functions:
document.write('<Meta name=" viewport " content=" width=640, user-
Scalable=no, target-densitydpi=device-dpi ">').
S2:Load Image, set the width resolution of picture consistent with the width resolution of virtual window, so as to ensure figure
When piece is shown in virtual window, because the resolution ratio of resolution ratio and virtual window is inconsistent, and cause picture display distortion;And
On the premise of picture width resolution is consistent with the width resolution of virtual window, and equal proportion zoom to the width of picture with
The width of virtual window is consistent, to be displayed in full screen picture in virtual window.
Specifically, step S2 includes:Judge picture width resolution and virtual window width resolution it is whether consistent,
If consistent, the width that picture equal proportion directly is zoomed into picture is consistent with the width of virtual window;If inconsistent, adjust
The width resolution of picture is consistent with the width resolution of virtual window, then by picture equal proportion zoom to the width of picture with it is empty
The width for intending window is consistent.It is to be appreciated that will not be deformed and distortion to ensure that picture is shown in virtual window, in net
In the development process of page application, need to be provided with is used to detect that the width resolution of picture and the width resolution of virtual window are gone forward side by side
Row compares, for adjusting picture width resolution and controlling picture equal proportion to zoom to the journey of the same size with virtual window
Sequence.
S3:Picture is arranged into background to show in virtual window.It is to be appreciated that picture is arranged into background and shown
Show, be conducive to improving the speed for showing picture in virtual window, in Web page type application process, be arranged to the picture of background not
Easily deform.Specifically, the attribute of picture is set to be arranged to the back of the body during display by HTML5 api interface
Scape and only show once, and judge whether the height of picture is more than the height of virtual window;If so, then by picture in virtual window
Picture, i.e., be placed on the upper left corner, the upper right corner, the lower left corner or the lower right corner of virtual window, display picture is in void by middle local display
Intend the part within window;If it is not, then picture is directly displayed in virtual window.It is to be appreciated that due to the width of picture
The width resolution of resolution ratio and virtual window, and picture equal proportion is zoomed to the width one of picture width and virtual window
Cause, therefore when by picture local display in virtual window, the width of picture and the width of virtual window be always ensured that unanimously,
When being shown in the mobile terminal of different screen size, the top and/or bottom for being only possible to there is a possibility that picture can not be shown,
Therefore the upper left corner for picture being placed on into virtual window is consistent with the effect in the upper right corner, the top for showing picture;By picture
The lower left corner for being placed on virtual window is consistent with the effect in the lower right corner, the bottom for showing picture.
It is to be appreciated that the height resolution of virtual window can also be arranged to fixed value by the present invention, and by above-mentioned implementation
Width replacement relative with height in example, can also realize the purpose of the present invention.
To sum up, the display adaptation method of Web page type application, is fixation by founding width resolution in the terminal
The virtual window of value, to show Web page, it is ensured that Web page is shown unanimously in the Web page type application of mobile terminal, is not in
Page metaboly;Load Image and set the width resolution of picture consistent with the width resolution of virtual window, width and void
The width for intending window is consistent, then picture is arranged into background show, thus ensure picture show process will not metamorphopsic distortion, influence
Consumer's Experience.
Fig. 2 shows the theory diagram of the display adaptive device that Web page type is applied in one embodiment of the invention.The Web page type should
Display adaptive device includes:
Window setting unit 10:For founding the virtual window for showing Web page on mobile terminals, and will be virtual
The width resolution of window is set to fixed value.Specifically, window setting unit 10 can be operated according to used in mobile terminal
The difference of system, the virtual window of compatible different operating system is set by HTML5 api interface in the terminal, and will
The width resolution of virtual window is set to fixed value, it is ensured that Web page display consistency in the Web page type application of mobile terminal,
Avoid the occurrence of page metaboly.It is to be appreciated that founding compatible different behaviour in the terminal using HTML5 api interface
Make the virtual window of system, its compatibility is strong, be applicable to include and be not limited to smart mobile phone, tablet personal computer, PAD etc. it is mobile eventually
End.
Picture loading unit 20:For Loading Image, the width resolution of picture and the width resolution of virtual window are set
Rate is consistent, and equal proportion zoom to picture width it is consistent with the width of the virtual window.Specifically, picture loading unit 20
Can determine whether picture width resolution and virtual window width resolution it is whether consistent, if unanimously, directly by picture etc. compare
The width that example zooms to picture is consistent with the width of virtual window;If inconsistent, adjust the width resolution of picture with it is virtual
The width resolution of window is consistent, then the width that picture equal proportion is zoomed into picture is consistent with the width of virtual window.Can be with
Understand ground, will not be deformed and distortion to ensure that picture is shown in virtual window, in the development process that Web page type is applied,
Need to be provided be used for detect the width resolution of picture and the width resolution of virtual window and be compared, it is wide for adjusting picture
Degree resolution ratio and control picture equal proportion zoom to the program of the same size with virtual window.
Show adaptation unit 30:Shown for picture to be arranged into background in virtual window.It is to be appreciated that by picture
It is arranged to background and shows, be conducive to improving the speed for showing picture in virtual window, in Web page type application process, sets
Deformation is less likely to occur picture into background.Specifically, the attribute of picture is set in display by HTML5 api interface
During be arranged to background and only show once, and judge whether the height of picture is more than the height of virtual window;If so, then will
Picture local display in virtual window.Specifically, picture can be placed on to the upper left corner, the upper right corner, the lower left corner of virtual window
Or the lower right corner, when picture height is more than virtual window height, only show part of the picture within virtual window.
The display adaptive device of Web page type application, by founding the void that width resolution is fixed value in the terminal
Intend window, to show Web page, it is ensured that Web page is shown unanimously in the Web page type application of mobile terminal, be not in that the page becomes
Shape phenomenon;Load Image and set the width resolution of picture consistent with the width resolution of virtual window, width and virtual window
Width it is consistent, then picture is arranged to background show, so as to ensure that picture shows that process will not metamorphopsic distortion, influence user's body
Test.
The present invention is illustrated by a specific embodiment, it will be appreciated by those skilled in the art that, do not departing from
In the case of the scope of the invention, various conversion and equivalent substitute can also be carried out to the present invention.In addition, for particular condition or tool
Body situation, can make various modifications, without departing from the scope of the present invention to the present invention.Therefore, the present invention is not limited to disclosed
Specific embodiment, and whole embodiments for falling within the scope of the appended claims should be included.