In the examples below, the page uses a 1500px wide background image, and it has
this structure to make the visual render 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 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 double the size (no screen catcher example for this).
Cackground-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
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************
