NetFront Mobile Content Viewer |
|
Smart-Fit Rendering
Smart-Fit Rendering is a function that makes pages easily viewable by laying them out according to the screen width. Various sites created for PCs can be properly displayed on mobile terminals using this function.
If the page width is larger than the screen width, then horizontal scrolling is required in order to view the entire page. Left-right scrolling is particularly required for reading each line on pages where the length of the line exceeds the screen width. With Smart-Fit Rendering, since such pages are laid out according to the screen width, they can be viewed smoothly, without causing horizontal scrolling.
The majority of pages created for PCs assume a screen width of 640-800 pixels or more. On the other hand, cellular phone and PDA screen widths, even if large, are a standard 240 pixels. When the screen width on a 240-pixel terminal displays a PC-oriented page as-is, the part exceeding 240 pixels extends beyond the screen, requiring horizontal scrolling. Smart-Fit Rendering adjusts the layout of such pages to fit within 240 pixels.
Concretely, the following process is performed:
- Images larger than the screen width are scaled down to fit the screen width.
- Tables larger than the screen width are split and laid out vertically.
In environments where Smart-Fit Rendering is performed, pay attention to the following points in order to display content without problems.
- Do not specify position:absolute in stylesheets
If an absolute position is specified using position:absolute, when the layout is adjusted using Smart-Fit Rendering, the layout may not be as expected because the position where elements should be displayed is not fixed. On pages where Smart-Fit Rendering is assumed, it is recommended that position:absolute not be specified.
- Pay attention to table layout
When Smart-Fit Rendering is performed, cells that were created expecting horizontal alignment may be laid out vertically.
- Pay attention to the reduction of images
With Smart-Fit Rendering, images are reduced to fit the screen width. Because of this, when displaying a wide image on a narrow screen, the image may be excessively reduced and become hard to see. When arranging images, the proper image size for viewing the content even when it is reduced is decided.
Just-Fit Rendering is provided as a similar function to Smart-Fit Rendering. Smart-Fit Rendering fixes the layout of tables vertically to fit within the screen width, while Just-Fit Rendering only reduces tables to fit within the screen width, and doesn't change the layout.
Using NetFront Mobile Content Viewer, the operation of Smart-Fit Rendering and Just-Fit Rendering can be confirmed even on a PC.
Hints for Creating Resolution Free Content
Cellular phone content, needs to be created separately from PC content, using Compact HTML. Compact HTML is a content description language for compact information terminals. In 1999, for the cellular phones on which we first installed our browser, CPUs and memory had little power and there were many limitations on hardware. We settled on Compact HTML as a subset of HTML that took these limitations into consideration, and was proposed to the W3C in cooperation with five major manufacturing companies.
However, hardware capabilities improved year-by-year and now it is feasible to install a full browser on a cellular phone. If a full browser can be installed on a cellular phone, then PC content and cellular phone content can be shared. This means the creation of content will change greatly from now on.
When a full browser could be installed on a cellular phone, the screen resolution became a barrier because of the differences between PCs and cellular phones. Considering these differences, content that can be viewed using both PCs and cellular phones is called here "Resolution Free Content".
For creating Resolution Free Content, pay attention to the following points:
- Consider the layout conditions for narrow-width screens
Confirm that the layout is not broken
When displayed on narrow-width screen, there are cases where the page layout may not be as expected. Confirm conditions of created content also when the width of the screen is narrowed.
Add a link to return to the top of the page, because the page length can become long
When displayed on narrow-width screens, the length of one line is shortened and the page itself becomes longer. Therefore, since the amount of scrolling also increases, it is necessary to consider adding a link for returning to the top of the page etc.
- Consider the attention items for Smart-Fit Rendering
Assuming that Smart-Fit Rendering will be performed on devices such as cellular phones, PDAs, etc., the attention items for Smart-Fit Rendering should be considered. Refer to "Smart-Fit Rendering" for details.
Methods for Detecting NetFront
There is some content for which you may want to detect the browser the user is using on the content side and distribute processing. The method for referring to the User-Agent or the JavaScript navigator object and for detecting that the user's browser is NetFront is explained here.
- Detect using User-Agent
With CGI, etc., if the string "NetFront" is included in the HTTP_USER_AGENT environment variable, it is possible to detect that the browser used is NetFront. With JavaScript, the same value as HTTP_USER_AGENT is set in the userAgent property of the navigator object so, by referring to this, it is possible to detect that it is NetFront also
Example
if (navigator.userAgent.indexOf("NetFront") != -1) {
// A NetFront process
}
- Detect using appName property of the navigator object
With JavaScript, if the appName property of the navigator object is "ACCESS NetFront", it is possible to detect that the browser used is NetFront
Example
if (navigator.userName.indexOf("ACCESS NetFront") != -1) {
// A NetFront process
}
Note: This article explained the methods for detecting products equipped with NetFront for which the User-Agent and navigator object have been specified according to the format recommended by us ("NetFront", "ACCESS NetFront"). Depending on the installed product, there are cases where a product-specific format, and not the format described above, is decided. In these cases, it is necessary to detect according to the product-specific format.
|
HTML Reference (PDF)
