Webpage Image Layout Adjustment for Mobile Screens
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
When browsing webpages on mobile terminals, large images often exceed the screen size, requiring horizontal scrolling and impacting user experience, especially when images are centered, leading to incomplete viewing or ignoring of images due to blank sections.
Innovation Solution
A method and system for adjusting webpage layout by calculating the image display width based on the mobile terminal's screen width, determining if the image is within a text segment, and adjusting its size and justification to ensure it fits within the screen, allowing vertical scrolling and left-justified alignment with text.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Manufacturing precision
If large images are displayed at their original size on mobile terminals, then image quality is preserved, but horizontal scrolling is required and user experience deteriorates
Solution Approach 1:
The patent dynamically changes the display parameters (width and height) of images based on the mobile terminal's screen dimensions. When an image is detected to be larger than the screen width, the system automatically scales it down to fit within the screen boundaries, allowing complete viewing without horizontal scrolling while maintaining acceptable image quality.
Solution Approach 2:
The patent implements dynamic image sizing that adapts to different screen sizes and orientations. The image display dimensions are not fixed but are determined at runtime based on the actual screen width, making the layout flexible and responsive to various mobile device configurations.
2Shape
If images are centered on the page, then visual balance is improved, but text alignment becomes misaligned and user experience worsens
Solution Approach 1:
The patent applies different alignment properties to different elements based on their type. Text content maintains left justification for proper readability, while images are positioned to fit the screen width. This local differentiation of alignment properties resolves the conflict between visual balance and text alignment.
3Ease of operation
If images are scaled down to fit screen width, then horizontal scrolling is eliminated, but image size is reduced
Solution Approach 1:
The system changes the display parameters of images conditionally - only when the original image width exceeds the screen width. The scaling is performed proportionally to maintain aspect ratio, and the scaled dimensions are calculated to maximize image size while fitting within screen boundaries, thus minimizing the reduction in image area.
4Ease of operation
If webpage layout is adjusted dynamically, then user experience is improved, but system complexity increases
Solution Approach 1:
The patent implements an automatic detection and adjustment mechanism that operates without user intervention. The system self-determines when image scaling is needed by comparing image dimensions with screen width, and automatically applies the appropriate styling, eliminating the need for manual layout adjustments or complex user controls.
Data Source
AI summary
A method and system for adjusting webpage layout are disclosed. The method includes calculating a width for displaying an image on a webpage; determining whether the image is inserted in a segment of text of the webpage; and adjusting the size of the image display based on a mobile terminal's screen width and the width for displaying the image, if the image is inserted in the segment of text of the webpage. The disclosed methods and systems adjust the images on a webpage based on the width of the image and the screen width of a mobile terminal. As such, an adjusted webpage can be viewed by scrolling up and down the display screen. In addition, a user's online experience may be further improved by adjusting the images on the webpage to be left justified and aligned with the text on the page. A user does not need to scroll horizontally (e.g., from left to right) to read the webpage including the images.