CN103631958B - A kind of page automatic adaptation realizes the method that content multi-screen is shown - Google Patents
A kind of page automatic adaptation realizes the method that content multi-screen is shown Download PDFInfo
- Publication number
- CN103631958B CN103631958B CN201310688477.9A CN201310688477A CN103631958B CN 103631958 B CN103631958 B CN 103631958B CN 201310688477 A CN201310688477 A CN 201310688477A CN 103631958 B CN103631958 B CN 103631958B
- Authority
- CN
- China
- Prior art keywords
- module
- picture
- content
- terminal
- server
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 230000006978 adaptation Effects 0.000 title claims abstract description 15
- 238000000034 method Methods 0.000 title claims abstract description 15
- 230000000694 effects Effects 0.000 claims abstract description 11
- 238000012545 processing Methods 0.000 claims description 21
- 238000013461 design Methods 0.000 claims description 9
- 230000003044 adaptive effect Effects 0.000 claims description 6
- 238000011161 development Methods 0.000 claims description 5
- 230000008569 process Effects 0.000 claims description 5
- 230000005540 biological transmission Effects 0.000 claims description 3
- 230000004069 differentiation Effects 0.000 abstract description 2
- 238000010586 diagram Methods 0.000 description 4
- 238000012423 maintenance Methods 0.000 description 3
- 230000003993 interaction Effects 0.000 description 2
- 238000013459 approach Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000008901 benefit Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000007726 management method Methods 0.000 description 1
- 230000004044 response Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention discloses a kind of page automatic adaptation and realize the method that content multi-screen is shown, including being N number of layout modules by needing the content cutting shown, content genres is set according to module size；Then use web server that the size that layout modules is preset according to configuration file is automatically generated one group of pattern；It is that each content module chooses the typesetting again of suitable pattern finally according to different terminals.The present invention abandons the way each developing a set of user interface for computer, smart mobile phone and IPTV；When asking a certain content, the return value that differentiation different screen terminal is not quite similar responds, thus when different terminals user accesses, represents suitable display effect.
Description
Technical field
The invention belongs to web design field, be specifically related to a kind of page automatic adaptation and realize the method that content multi-screen is shown.
Background technology
At present, the Internet, telecommunications network, television network interpenetrate, compatible, merge and become development trend.But, different terminal equipment has respective screen resolution, definition, screen oriented approach and browser etc., by the result of same displaying interface often cannot adaptive three kinds of screens and multiple terminal screen size, the most just cause user operation inconvenience.In order to ensure to service extensively covering, promote bandwagon effect, make the user group with distinct device preference break away from terminal to limit, by computer, smart mobile phone, IPTV access same in perhaps service time, all can obtain good experience, it is necessary for each developing a interface, such as website, cell-phone customer terminal and IPTV EPG for different terminals.Otherwise, when user accesses same content by different terminals, layout confusion, overlaying graphics often occur, display is imperfect or causes the various problems such as operation inconvenience, poor user experience because of interface scaling.But, when separately designing for same application or service based on computer, smart mobile phone and IPTV, develop the page, find that it at least exists following defect:
First, for same content design iterations, exploitation, substantial amounts of human and material resources, fund, time etc. need to be expended, produce the serious wasting of resources.
Second, based on different screen terminal each isolated design, the content of exploitation, follow-up renewal, maintenance are extremely inconvenient, it is also difficult to ensure the concordance of content.
3rd, each develop for different terminals, it is difficult to ensure relatively uniform look & feel, Product Experience, and be not easy to sharing and management of resource.
4th, response type design implementation difficulty is big, is required for multiple situation and writes exploitation code, not only higher to terminal, browser requirement, is also not suitable with the frequent updating of bulk information.
Summary of the invention
For meeting the demand that content represents across screen, when solving adaptive different screen terminal, need design iterations, develop, safeguard the contradiction of multiple page, the present invention proposes one can realize automatic adaptation by service end, the method showing content based on multiple screen terminal such as computer, smart mobile phone and IPTV.
The technical scheme is that a kind of page automatic adaptation realizes the method that content multi-screen is shown, including to the contents pattern blocked shown, elastification；Different content module is automatically processed, the automatic adaptation to different terminals.
Described comprises the steps: the contents pattern blocked shown, elastification
Step 11: according to INTERFACE DESIGN and content, make rational planning for, is N number of layout modules by the full content cutting at interface；
Step 12: in layout modules, with this block size as reference value, utilizes " percentage ratio width=object element width/module width " this formula, arranges word, the relative size of picture in module；
Described automatically processes different content module, is completed by web server, comprises the steps:
Step 21: upload a certain interface program, and update, upload configuration file, this configuration file this interface program is developed defined in N number of module be illustrated, and preset one group of processing parameter M1, M2 of each module in this N number of module ... M；
Step 22: server processing unit reads the processing parameter of each module in configuration file, and redefines N group pattern according to the processing parameter of each module；
Step 23: server storage unit record, storage result；
Step 24: when comprising picture in module, server processing unit submits the dimension of picture under novel type to graphics engine；
Step 25: picture is zoomed in and out according to new dimension of picture, cuts by graphics engine；
Step 26: the new picture after graphics engine transmission process is to picture servers, and has processed prompting to the processing unit return of server；
Step 27: last, server has processed prompting to development equipment return；
The described automatic adaptation to different terminals, comprises the steps:
Step 31: different terminals submits access request to；
Step 32: server receives the access request that computer, smart mobile phone and IPTV different terminals are submitted to, is obtained terminal parameter, including browser type, browser window size, screen resolution etc.；
Step 33: server is each module configuration style file according to terminal parameter, such as, during by mobile phone access interface, chooses the A pattern of modules that module size is 320 × 240, and module size is the B pattern of modules etc. of 240 × 180；
Step 34: server returns above-mentioned file, and terminal explains；
Step 35: in terminal interpretation process, when detect comprise picture time, to picture servers send picture load request；
Step 36: picture servers receives request, and picture is back to terminal；
Step 37: terminal loads picture, continuing with；
Step 38: terminal completes to explain, the interfacial effect of display adaptive terminal.
Beneficial effects of the present invention: the present invention abandons the way each developing a set of user interface for computer, smart mobile phone and IPTV；When asking a certain content, the return value that differentiation different screen terminal is not quite similar responds, thus when different terminals user accesses, represents suitable display effect.Compared with prior art, significant effect and advantage are as follows:
1, perhaps service based on multiple terminal automatizatioies such as computer, smart mobile phone and IPTV adaptive in same, improve design and development efficiency；
2, different terminals presents the content and effect being not quite similar, and Consumer's Experience is good；
3, only need a set of interface of updating maintenance, reduce manpower and the time cost of maintenance work；
4, low to demanding terminal, it is more easy to implement, there is universality.
Accompanying drawing explanation
Fig. 1 is to realize multi-screen in the present invention to show the interaction sequences figure of same content；
Fig. 2 is server processing module pattern and the schematic diagram of picture in the present invention；
Fig. 3 is the flow chart of automatic adaptation different terminals in the present invention；
Fig. 4 is that in the present invention, under normal window, interface presents the schematic diagram of effect；
When Fig. 5 is that in the present invention, different terminals accesses same content, difference represents the schematic diagram of effect.
Detailed description of the invention
Embodiment
1
As it is shown in figure 1, be the interaction sequences figure realizing the same content of multi-screen presentation in the present invention.Same content realizes automatically adapting at computer, smart mobile phone and IPTV, the method presenting different bandwagon effect, it is characterised in that the method at least comprises the steps:
Step 1, the contents pattern blocked for needs displaying, elastification；
Step 2, different content module is automatically processed；
Step 3, automatic adaptation for different terminals.
In above-mentioned steps 1, for needing the contents pattern blocked shown, elastification concrete methods of realizing to be:
Step 11, according to INTERFACE DESIGN and content, make rational planning for, be N number of layout modules by the full content cutting at interface；
In step 12, layout modules, with this block size as reference value, utilize " percentage ratio width=object element width/module width " this formula, word, the relative size of picture in module is set.
In above-mentioned steps 2, different content module is automatically processed, is completed by web server.Web server pre-installed program makes it have following functions:
1, one group of outside input value can be accepted；
2, the pattern of corresponding contents module can be redefined according to the outside input value of this group, including the length/width of this content module layout；The size of word in this module, display content number；The picture in graphics engine processing module is utilized to be adapted for this module size；
3, one group of pattern result after changing can be stored according to outside input value；
When 4, modal shift in particular cases, such as font size can be controlled less than marginal value according to preset critical, eject miscue.
As in figure 2 it is shown, be server processing module pattern and the schematic diagram of picture in the present invention, comprise the steps:
Step 21, upload a certain interface program, and update, upload configuration file, this configuration file this interface program is developed defined in N number of module be illustrated, and preset one group of processing parameter M1, M2 of each module in this N number of module ... M；
Step 22, server processing unit read the processing parameter of each module in configuration file, and redefine N group pattern according to the processing parameter of each module；
Step 23, server storage unit record, storage result；
Step 24, when module comprises picture, server processing unit submits the dimension of picture under novel type to graphics engine；
Picture is zoomed in and out according to new dimension of picture, cuts by step 25, graphics engine；
New picture after step 26, graphics engine transmission process is to picture servers, and has processed prompting to the processing unit return of server.
Step 27, last, server has processed prompting to development equipment return.
In above-mentioned steps 3, for the automatic adaptation of different terminals, refer to when server responds a certain content requests, will be according to terminal parameter, each pattern of modules of Auto-matching such as including browser type, browser window size, screen resolution, typesetting again.As it is shown on figure 3, be the schematic flow sheet of automatic adaptation different terminals in the present invention, specifically include following steps:
Step 31, different terminals submit access request to；
Step 32, server are received the access request that computer, smart mobile phone and IPTV different terminals are submitted to, obtain terminal parameter, including browser type, browser window size, screen resolution etc.；
Step 33, server are each module configuration style file according to terminal parameter, such as, during by mobile phone access interface, choose the A pattern of modules that module size is 320 × 240, and module size is the B pattern of modules etc. of 240 × 180；
Step 34, server return above-mentioned file, and terminal explains；
In step 35, terminal interpretation process, when detect comprise picture time, to picture servers send picture load request；
Step 36, picture servers receive request, and picture is back to terminal；
Step 37, terminal loads picture, continuing with；
Step 38, terminal complete to explain, the interfacial effect of display adaptive terminal.
Claims (1)
1. page automatic adaptation realizes the method that content multi-screen is shown, including to the contents pattern blocked shown, elastification；
Different content module is automatically processed, the automatic adaptation to different terminals；It is characterized in that:
Described comprises the steps: the contents pattern blocked shown, elastification
Step 11: according to INTERFACE DESIGN and content, make rational planning for, is N number of layout modules by the full content cutting at interface；
Step 12: in layout modules, with this block size as reference value, utilizes " percentage ratio width=object element width/module width " this formula, arranges word, the relative size of picture in module；
Described automatically processes different content module, is completed by web server, comprises the steps:
Step 21: upload a certain interface program, and update, upload configuration file, this configuration file this interface program is developed defined in N number of module be illustrated, and preset one group of processing parameter M1, M2 of each module in this N number of module ... M；
Step 22: server processing unit reads the processing parameter of each module in configuration file, and redefines N group pattern according to the processing parameter of each module；
Step 23: server storage unit record, storage result；
Step 24: when comprising picture in module, server processing unit submits the dimension of picture under novel type to graphics engine；
Step 25: picture is zoomed in and out according to new dimension of picture, cuts by graphics engine；
Step 26: the new picture after graphics engine transmission process is to picture servers, and has processed prompting to the processing unit return of server；
Step 27: last, server has processed prompting to development equipment return；
The described automatic adaptation to different terminals, comprises the steps:
Step 31: different terminals submits access request to；
Step 32: server receives the access request that computer, smart mobile phone and IPTV different terminals are submitted to, obtains terminal parameter, including browser type, browser window size, screen resolution；
Step 33: server is each module configuration style file according to terminal parameter；
Step 34: server returns above-mentioned file, and terminal explains；
Step 35: in terminal interpretation process, when detect comprise picture time, to picture servers send picture load request；
Step 36: picture servers receives request, and picture is back to terminal；
Step 37: terminal loads picture, continuing with；
Step 38: terminal completes to explain, the interfacial effect of display adaptive terminal.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201310688477.9A CN103631958B (en) | 2013-12-17 | 2013-12-17 | A kind of page automatic adaptation realizes the method that content multi-screen is shown |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201310688477.9A CN103631958B (en) | 2013-12-17 | 2013-12-17 | A kind of page automatic adaptation realizes the method that content multi-screen is shown |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN103631958A CN103631958A (en) | 2014-03-12 |
| CN103631958B true CN103631958B (en) | 2016-08-17 |
Family
ID=50212999
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201310688477.9A Active CN103631958B (en) | 2013-12-17 | 2013-12-17 | A kind of page automatic adaptation realizes the method that content multi-screen is shown |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN103631958B (en) |
Families Citing this family (17)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104978317B (en) * | 2014-04-02 | 2019-12-20 | 腾讯科技（北京）有限公司 | Webpage generation method and device, website generation method and website establishment server |
| CN104267887B (en) * | 2014-09-13 | 2017-07-28 | 重庆市科学技术研究院 | Five application page self-adaption typesetting display methods based on application widget dimensional parameters |
| CN105045573B (en) * | 2015-06-24 | 2018-03-23 | 国电南京自动化股份有限公司 | Based on WEB across the photovoltaic plant monitoring of screen technology and debugging software method for building up |
| CN105117454A (en) * | 2015-08-18 | 2015-12-02 | 浪潮软件集团有限公司 | Device, system and method for accessing web product |
| CN106874271A (en) * | 2015-12-10 | 2017-06-20 | 上海新工式网络科技有限公司 | A kind of method and system that PC webpages are converted to mobile terminal webpage |
| CN105892964A (en) * | 2015-12-10 | 2016-08-24 | 乐视网信息技术（北京）股份有限公司 | Block configuration method, block display method, server, terminal equipment and communication system |
| CN105912543A (en) * | 2015-12-14 | 2016-08-31 | 乐视网信息技术（北京）股份有限公司 | Device, system, and method for multi-terminal content publishing |
| CN106294305A (en) * | 2016-07-21 | 2017-01-04 | 上海网达软件股份有限公司 | Android smart machine carries out, to html web page content, the method that segmentation shows |
| CN108023918A (en) * | 2016-11-02 | 2018-05-11 | 阿里巴巴集团控股有限公司 | A kind of information on services acquisition methods, apparatus and system |
| CN108959303B (en) * | 2017-05-22 | 2022-07-15 | 阿里巴巴集团控股有限公司 | Display picture generation method, display picture layout generation method and data processing server |
| CN107358498A (en) * | 2017-06-27 | 2017-11-17 | 昆山市那美信息科技有限公司 | A kind of intelligent panoramic display systems and its implementation based on mobile electric business APP |
| CN107872712A (en) * | 2017-12-04 | 2018-04-03 | 苏州精濑光电有限公司 | A kind of more screen interface information synchronous method and device |
| CN109284461A (en) * | 2018-11-01 | 2019-01-29 | 成都四方伟业软件股份有限公司 | A kind of webpage autoplacement method and device based on WEB |
| CN109597669A (en) * | 2018-11-20 | 2019-04-09 | 湖南快乐阳光互动娱乐传媒有限公司 | Adapt to the full frame methods of exhibiting of start up graphic and system of different size screens |
| CN111198668B (en) * | 2019-12-26 | 2023-06-16 | 成都中科合迅科技有限公司 | Multi-screen system and multi-screen interaction method based on browser |
| CN111506378B (en) * | 2020-04-17 | 2021-09-28 | 腾讯科技（深圳）有限公司 | Method, device and equipment for previewing text display effect and storage medium |
| CN115797507A (en) * | 2023-01-29 | 2023-03-14 | 北京金茂教育科技有限公司 | File annotation display method and system |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1897529A (en) * | 2005-07-11 | 2007-01-17 | 中国移动通信集团公司 | Automatic adapter for mobile telecommunication terminal display page |
| CN1996863A (en) * | 2006-12-27 | 2007-07-11 | 华为技术有限公司 | A method and system for processing the client request |
| CN101909179A (en) * | 2010-08-04 | 2010-12-08 | 中国电信股份有限公司 | Automatic adapting method of set box browser display area |
-
2013
- 2013-12-17 CN CN201310688477.9A patent/CN103631958B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1897529A (en) * | 2005-07-11 | 2007-01-17 | 中国移动通信集团公司 | Automatic adapter for mobile telecommunication terminal display page |
| CN1996863A (en) * | 2006-12-27 | 2007-07-11 | 华为技术有限公司 | A method and system for processing the client request |
| CN101909179A (en) * | 2010-08-04 | 2010-12-08 | 中国电信股份有限公司 | Automatic adapting method of set box browser display area |
Also Published As
| Publication number | Publication date |
|---|---|
| CN103631958A (en) | 2014-03-12 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN103631958B (en) | A kind of page automatic adaptation realizes the method that content multi-screen is shown | |
| CN106296622B (en) | Automatic layout jigsaw method and device | |
| CN112015509A (en) | Data visualization large screen construction method, electronic device and storage medium | |
| CN112055244B (en) | Image acquisition method and device, server and electronic equipment | |
| CA2922060A1 (en) | Swipe toolbar to switch tabs | |
| CN101937428A (en) | Method and system for rearranging pictures with literal contents for mobile terminal equipment | |
| WO2015184736A1 (en) | Method and terminal for transforming background picture of touchscreen device | |
| CN113127784A (en) | Large-screen data visual display method and device, storage medium and computer equipment | |
| CN104391896A (en) | Plane printed product typesetting method and system based on webpage | |
| CN111459501A (en) | SVG-based Web configuration picture storage and display system, method and medium | |
| CN111638818B (en) | Window position adjusting method and device and electronic equipment | |
| WO2024061088A1 (en) | Display method and apparatus, electronic device, and storage medium | |
| CN104536649A (en) | Page display method and device | |
| CN105045587A (en) | Picture display method and apparatus | |
| CN110866208B (en) | Page response type layout method, device and equipment | |
| CN106020752A (en) | Method and system for self-adaptation display | |
| US20130031467A1 (en) | So-called hd-web method for high-definition and all-screen compatibile internet contents | |
| CN107391148B (en) | View element saving method and device, electronic equipment and computer storage medium | |
| CN105630893A (en) | Display method and device of photo title | |
| CN106535002B (en) | Desktop starter template layout updating method and device | |
| CN105389308A (en) | Display processing method and device for web pages | |
| CN109062525B (en) | Data processing method and device of tiled display system and computer equipment | |
| CN110209950A (en) | Display method and device of push information, electronic equipment and storage medium | |
| CN104572157A (en) | Information processing method and electronic equipment | |
| CN103870111A (en) | Information processing method and electronic equipment |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| C14 | Grant of patent or utility model | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20190322 Address after: 210006 Tongyu Building, 501 Zhongshan South Road, Nanjing City, Jiangsu Province Patentee after: Tianyi Smart Family Technology Co.,Ltd. Address before: 210006 No. 501 Zhongshan South Road, Nanjing, Jiangsu Province Patentee before: JIANGSU PROVINCE PUBLIC INFORMATION CO.,LTD. |
|
| CP02 | Change in the address of a patent holder | ||
| CP02 | Change in the address of a patent holder |
Address after: 201702 3rd floor, 158 Shuanglian Road, Qingpu District, Shanghai Patentee after: Tianyi Smart Family Technology Co.,Ltd. Address before: 210006 Tongyu Building, 501 Zhongshan South Road, Nanjing City, Jiangsu Province Patentee before: Tianyi Smart Family Technology Co.,Ltd. |
|
| TR01 | Transfer of patent right | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20220223 Address after: Room 1423, No. 1256 and 1258, Wanrong Road, Jing'an District, Shanghai 200072 Patentee after: Tianyi Digital Life Technology Co.,Ltd. Address before: 201702 3rd floor, 158 Shuanglian Road, Qingpu District, Shanghai Patentee before: Tianyi Smart Family Technology Co.,Ltd. |