During website testing, when changing the size of the browser window or changing the direction of the screen, each part is kept in its relative position and stretched to fill the entire area. Although this feature depends to some extent on the device and browser being used, when using jQueryMobile, each part will always try to stay where it should be.
In this chapter, I learned three basic parts of a mobile website, namely, header, content area and footer. Combine these parts on a web page and use the jQuery Mobile library to render them into a mobile website in the browser.
You have also learned that effective HTML can be used in each section, and that inline styles can be used in each section to control the style of content. Styles can also be controlled through external CSS files.
You learned how to add a picture to your website and zoom it. Finally, I learned how to use multiple "page" elements in an HTML file and how to use buttons to navigate between pages.
FAQ
Q: I have seen some mobile websites have navigation fields, a persona icon or a splash screen, and some call response buttons. How do these correspond to the "three main parts" of mobile websites?
Answer: The navigation domain can be placed in multiple regions. Some navigation fields are included in the header, while others are placed in the entire footer. As for the call out button, many websites place one in the header or a fixed position in the content area, which remains unchanged when browsing websites. Many elements form a mobile website. The "three main parts" is a way to help you divide your website and consider the layout.
Q: Can I use any HTML tag in any part? Or can only use used ones?
Answer: Any tag can be used as long as it is a valid HTML tag. Some tags may be styled by the internal theme system, but they can always override the style or use different tags. The tags that may cause failure are those that are invalid or not created.
Q: Why is the picture set to "max width: 100%"?
Answer: This allows the picture to zoom on its own. By setting the style of all image tags to "max width: 100%", the browser is told that the image cannot exceed the parent container and should be as close to it as possible. In this way, when the parent container is smaller than the actual size of the image, the image will be scaled down to fit the parent container. Note that if you are viewing a mobile website in an older version of the browser, the picture may still exceed the parent container.
