Philippe, Thanks for checking. >> > > 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).
But iOS Safari able to resize (downsize) a webpage to its viewport when no viewport declared. Why is it not the background image? You probably has already noticed, the contents are downsized to fit the viewport 768; also for landscape view, the viewport is 1024, and since the container that holds the bg image is 1024 it shouldn't cut off the image, but it does. This is the reason I thought it's a bug. Tee > >> 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 [css-d@lists.css-discuss.org] 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/
