![]() However, these defaults may not work well for your webpages, particularly if you are tailoring your website for a particular device. Safari on iOS sets the size and scale of the viewport to reasonable defaults that work well for most webpages, as shown on the left in Figure 3-3. Mostly, you do this to improve the presentation the first time iOS renders the webpage. You can set the viewport size and other properties of your webpage. The only exception is when the user changes from portrait to landscape orientation-under certain circumstances, Safari on iOS may adjust the viewport width and height, and consequently, change the webpage layout. Using the double tap, pinch open, and pinch close gestures, users can change the scale of the viewport but not the size. When the user pans a webpage on iOS, gray bars appear on the right and bottom sides of the screen as visual feedback to show the user the size of the visible area as compared to the viewport (similar to the length of scroll bars on the desktop). The viewport can be larger or smaller than the visible area. Figure 3-2 Safari on desktop viewport Safari on iOS Viewportįor Safari on iOS, the viewport is the area that determines how content is laid out and where text wraps on the webpage. If the webpage is smaller than the viewport, it is filled with white space to fit the size of the viewport. When the viewport is resized, Safari may change the document’s layout-for example, expand or shrink the width of the text to fit. If the webpage is larger than the viewport, then the user scrolls to see more of the webpage. The user resizes the viewport by resizing the window. The viewport on the desktop is the visible area of the webpage as shown in Figure 3-2. Figure 3-1 Differences between Safari on iOS and Safari on the desktop Safari on the Desktop Viewport Note that these differences between the viewports may affect some of the HTML and CSS instructions on iOS. Because of the differences in the way users interact with web content, the viewport on the desktop and on iOS are not the same. The user zooms in by double-tapping and pinch opening, and zooms out by pinch closing-gestures that are not available for Safari on the desktop. Safari on iOS has no windows, scroll bars, or resize buttons as shown on the right in Figure 3-1. The viewport on the desktop and the viewport on iOS are slightly different. See Supported Meta Tags for a complete description of the viewport meta tag. Read Viewport Settings for Web Applications if you are designing a web application for iOS. Read Changing the Viewport Width and Height and How Safari Infers the Width, Height, and Initial Scale to understand better how setting viewport properties affects the way webpages are rendered on iOS. Read Default Viewport Settings and Using the Viewport Meta Tag for how to use the viewport meta tag. Read What Is the Viewport? for a deeper understanding of the viewport on iOS. Read Safari on iOS Viewport to learn about the available screen space for webpages on small devices. ![]() ![]() ![]() Otherwise, read the sections in this chapter in the following order: If you are already familiar with the viewport on iOS, read Using the Viewport Meta Tag for details on the viewport tag and Viewport Settings for Web Applications for web application tips. Before configuring the viewport, you need a deeper understanding of what the visible area and viewport are on iOS. Configuring the viewport is easy-just add one line of HTML to your webpage-but understanding how viewport properties affect the presentation of your webpages on iOS is more complex. You especially need to configure the viewport if you are designing webpages specifically for iOS. If these default settings don’t work for your webpages, it is highly recommended that you change the settings by configuring the viewport. Safari on iOS displays webpages at a scale that works for most web content originally designed for the desktop. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |