Mobile Webpage Layout Adaptation for Block and Inline Elements
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Current mobile terminal webpage browsing experiences are hindered by PC-based layouts, which require extensive rearrangement, consuming processing resources and disrupting user experience due to smaller screens and lack of mouse functionality, leading to inconvenient scrolling and altered display formats.
Innovation Solution
A mobile terminal-based webpage layout method that maintains the width of block elements and wraps inline elements onto new lines based on the mobile terminal's screen width, preserving the overall PC-based layout while adapting to the mobile screen, reducing data processing and maintaining user familiarity.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If the WWW webpage with PC-based layout is completely rearranged to adapt to the mobile terminal display, then the webpage can be displayed on the mobile terminal screen, but data processing tasks are greatly increased and processing capabilities are consumed excessively
Solution Approach 1:
The patent segments the webpage layout into block elements and inline elements, applying different handling strategies to each. Block elements maintain their original widths and are not wrapped, while only inline elements are wrapped based on screen width. This selective segmentation approach adapts the webpage to mobile screens without requiring complete rearrangement, thus reducing data processing tasks while maintaining display adaptability.
2Adaptability or versatility
If the WWW webpage with PC-based layout is completely rearranged to adapt to the mobile terminal display, then the webpage can be displayed on the mobile terminal screen, but the display of the webpage becomes quite different from the PC-based layout, affecting the user's browsing experience
Solution Approach 1:
The patent applies local quality by making different parts of the webpage layout have different properties. Block elements maintain their original PC-based layout characteristics (fixed widths, structural integrity), while only inline elements undergo wrapping adjustments. This localized adaptation preserves the overall PC-based layout structure and user familiarity while making necessary adjustments for mobile screen display.
3Stability of the object's composition
If the WWW webpage is displayed strictly according to PC-based layout on mobile terminal, then the original webpage format is maintained, but the user needs to scroll left or right to view complete webpage content
Solution Approach 1:
The patent introduces dynamics by conditionally wrapping inline elements based on the mobile terminal screen width. When the screen width is insufficient to display the complete inline element content, the inline element is automatically wrapped to the next line. This dynamic adjustment maintains the stability of block element structures while improving operational convenience by eliminating the need for horizontal scrolling.
Data Source
AI summary
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.