> > > With Android/2.2.2 [low-end touch screen] there is a horizontal yellow > loading bar above the address bar-- it begins at the left rail and moves to > the right rail. Opera Mobile and OperaMini on Android both have a circular > whirling gizzmo loading button [same on a low-end SanyoMirro]. >
But it's iOS Safari that some people were talking that loads all images, not Andriod, not Opera Mini. So if I have main style sheet body {background : url(bg-img.png) } then this @media screen and (max-width:768px){ body { background:gray url(bg-bodytop-768.jpg) no-repeat left center} } iOS Safari does load two images this is how I always understood it, but if I target images in the media queries than no extra bg image will be loaded and this is what I learned later from Ethan Marcotte's book, but I have never seen an article that tells how you can test what elements get loaded in the mobile Safari (I don't think it's accurate seeing it from a simulator or Desktop version of Safari). In his book, he didn't give a clear demostration either but this: "First, we’re setting a background image on the .blog ele- ment. (Specifically, the two-toned blog-bg.png graphic we used in Chapter 2 to create the illusion of two columns.) Then for smaller displays, those narrower than 768px wide, we’re instead placing a simple tiled GIF on the blog element, since we’ve linearized the display of those narrower pages. The problem with this approach is that some small screen browsers, most notably Mobile Safari on the iPhone and the iPad, will actually download both graphics, even if only one is ultimately applied to the page. While smaller screens don’t always equate to lower bandwidth, we’re currently punishing users on smaller screens with the download of a much heavier image than they’ll ever see. Thankfully, these aren’t problems with responsive design in and of itself—we just need to rethink the way we’ve imple- mented it." "In fact, I took this approach on my personal portfolio site (http://ethanmarcotte.com). By default, the content is arranged in a very linear manner, one friendly to mobile devices and narrow browser windows (Fig 5.12). But as the viewport wid- ens, the grid becomes more complex and more asymmetrical (Fig 5.13). And at the highest end of the spectrum, the “full” design finally reveals itself: the layout becomes even more complex, and some heavier assets, like that big abstract back- ground image, are introduced (Fig 5.14)." And this is all I learned that images that are placed in media queries won't get loaded twice, or all. Using Safari's Web Inspector I see 4 bg images were loaded in my previouis example. tee ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *******************************************************************