Mobile terminal-based webpage layout method and apparatus
View Patent ↗The invention provides a mobile terminal based layout method, including rearranging a WWW (world wide web) webpage with PC-based layout according to the following layout rules: based on WWW webpage PC-based layout rules, keeping a width of a block element unchanged, and wrapping an inline element inside the block element onto a next line in a screen width of the mobile terminal; and displaying the webpage that is rearranged according to the above rules on the mobile terminal. By using the present invention, not only overall layout of the webpage remains a main display style of the PC-based layout, but local region of the webpage is adjusted to adapt to a mobile phone screen, so that contents such as characters can be continuously displayed within the mobile phone screen. The PC-based layout and the display of the mobile terminal are perfectly combined together, thus ensuring the users to browse the Internet on the mobile terminal more conveniently without changing their browsing habit.
1. A mobile terminal based webpage layout method, comprising:
rearranging a WWW (world wide web) webpage with PC (personal computer)-based layout according to the following layout rules:
based on WWW webpage PC-based layout rules, keeping a width of a block element unchanged,
when display effect of the WWW webpage is suitable for wrapping in a screen width, wrapping an inline element inside the block element onto a next line in the screen width of the mobile terminal;
when the display effect of the WWW webpage is not suitable for wrapping onto the next line in the screen width for parts including at least a title bar and a navigation bar in the WWW webpage, wrapping the inline element inside the block element onto the next line in the width of the block element or not wrapping the inline element inside the block element onto the next line;
when a value of “height” property of the block element is less than a preset range and a background image is set, wrapping the inline element inside the block element onto the next line in the width of the block element,
when a “line-height” property of the block element is set, the preset value range of “height” property of the block element is a predetermined value times the line-height;
when the “line-height” property of the block element is not set, the preset value range of “height” property of the block element is a predetermined value times a font size of the block element; and
displaying the webpage that is rearranged according to the layout rules on the mobile terminal.
2. The method according to claim 1 , wherein, when the display effect of the WWW webpage is not suitable for wrapping in the screen width, wrapping the inline element inside the block element onto the next line in the width of block element further includes:
when a value of a “white-space” property of the block element is ‘nowrap’ or ‘pre’, wrapping the inline element inside the block element onto the next line in the width of the block element.
3. The method according to claim 2 , wherein:
according to the mentioned layout rules, the WWW webpage is rearranged on the mobile terminal or an external server.
4. The method according to claim 1 , wherein, when the display effect of the WWW webpage is not suitable for wrapping onto the next line in the screen width, wrapping the inline element inside the block element onto the next line in the width of block element further includes:
when a value of “height” property of the block element is less than a preset range and the value of “overflow” property of the block element is ‘hidden’, wrapping the inline element inside the block element onto the next line in the width of the block element.
5. The method according to claim 4 , wherein:
according to the mentioned layout rules, the WWW webpage is rearranged on the mobile terminal or an external server.
6. The method according to claim 1 , wherein, when the display effect of the WWW webpage is not suitable for wrapping onto the next line in the screen width, wrapping the inline element inside the block element onto the next line in the width of block element further includes:
when a value of “position” property of the block element is ‘absolute’ or ‘fixed’, wrapping the inline element inside the block element onto the next line in the width of the block element.
7. The method according to claim 6 , wherein:
according to the mentioned layout rules, the WWW webpage is rearranged on the mobile terminal or an external server.
8. The method according to claim 1 , wherein, when the display effect of the WWW webpage is not suitable for wrapping onto the next line in the screen width, wrapping the inline element inside the block element onto the next line in the width of block element further includes:
when a value of “float” property of the block element is ‘right’, wrapping the inline element inside the block element onto the next line in the width of the block element.
9. The method according to claim 8 , wherein:
according to the mentioned layout rules, the WWW webpage is rearranged on the mobile terminal or an external server.
10. The method according to claim 1 , further including:
according to the mentioned layout rules, rearranging the WWW webpage on the mobile terminal or an external server.
11. The method according to claim 1 , wherein, when the display effect of the WWW webpage is not suitable for wrapping onto the next line in the screen width, wrapping the inline element inside the block element onto the next line in the width of block element further includes:
when the inline element inside the block element is text within a form control, not wrapping the inline element onto the next line.
12. The method according to claim 11 , wherein:
according to the mentioned layout rules, the WWW webpage is rearranged on the mobile terminal or an external server.
13. The method according to claim 1 , wherein the predetermined value is 1.8.