>
>
> 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: [email protected]
*******************************************************************
