On Jun 9, 2011, at 11:07 AM, tee wrote: > 1. With no viewport nor media queries, the #container-wrap bg image got > cut off in both landscape and portrait. > http://jsbin.com/aholi4/
That is what I would expect :-) Unless specified MobileSafari assumes a viewport width of 980px. In your case, the page overflows (#container being 1014 wide). > 2. With viewport which includes a media queries for portrait, the > landscape view renders correctly (no media queries ) > <meta content="width=device-width; initial-scale=1.0;" name="viewport"> > http://jsbin.com/apeti4/10/ > > I serve a 768px wide background for portrait view but it's not working > correctly, the bg image shows up fine but not the page's layout, the page > doesn't scale down like #1, furthermore, desktop safari is picking up this > queries. > @media all and (orientation:portrait) { > #container-wrap{width:100%;text-align: left;background:transparent > url(bg-hdr-768.jpg) no-repeat center top;} > #container, .quick-access-wrap{width:99%} > #content, #footer, {width:100%} > } Normal that desktopSafari would pick that query up, assuming that your browser window is taller than wider. Normal that Mobile Safari won't scale your design (that is what initial-scale="1.0" does) and thus again, that overflow. > 3. Same as above except desktop Safari. > @media only screen and (device-width: 768px) > http://jsbin.com/iziqi3 > @media only screen and (device-width: 768px) { > #container-wrap{width:100%;text-align: left;background:transparent > url(bg-hdr-768.jpg) no-repeat center top;} > #container, .quick-access-wrap{width:99%} > #content, #footer, {width:100%} > } > Same as above > 4. background-size treatment > > with "100% auto;" it shrinks (to 50% of original size I think) and with "100% > 100%;" it doubles the size (no screenshot example for this). The first one is the correct behaviour, the second one I'm not sure I understand, I'd ned to test. — All this has nothing to do with a background image, and everything with the concept of viewport. You could reproduce the same issues width a desktop browser. Open any of your pages in desktop Safari or Firefox, with a window width of, say, 600px. Then scroll to view your content to the right. See how your background is not present ? maybe just this: <meta name="viewport" content="width=1024px;"> or a variant there of. (tested with your http://jsbin.com/aholi4/ on my local server - I removed the 'width:100%' on #sitewrap and #container-wrap, both which are completely un-needed) Philippe -- Philippe Wittenbergh http://l-c-n.com/ ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
