Anybody here more experience with CSS issue for iPad? I am running out of idea
what might be the cause for this but to think it's a Safari rendering bug in
iOS..
In the examples below, the page uses a 1500px wide background image, and it has
this structure to make the visual displays properly.
<div id="sitewrap"> <--100% width with repeated bg imgage
<div id="container-wrap"> <--100% width with bg-hdr-1500.jpg
<div id="container"> <-- width:1014px
I need to keep the zoom feature enabled for iPad device, and ideally I want no
viewport nor media queries treatment, and if this is not possible (my tests
show that this is the case), I want to target the portrait view only (with the
condition that no futher treatment is needed for landscape view)
1. With no viewport nor media queries, the #container-wrap bg image got
cut off in both landscape and portrait.
http://jsbin.com/aholi4/
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%}
}
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%}
}
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).
background-size treatment affects both landscape and portrait.
http://jsbin.com/uworu3/
<!-- bacgkround image ( bg-hdr-1500.jpg) loads from the desktop style -->
#container-wrap{
width:100%;background-position: center top;
-webkit-background-size:100% auto;
-moz-background-size:100% auto;
-o-background-size:100% auto;}
Thanks!
tee
______________________________________________________________________
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/
