css - oversized div displaying in ipad wrong -
i have div both 4000 pixels wide , tall, , not want display on ipad. how supposed like, shown in safari (please disregard hideous gradient; it's in rough alpha!):
http://i.stack.imgur.com/umajd.png
see how loads (somewhat) squarely in window? nice. screenshot of same site, offending ipad:
http://i.stack.imgur.com/niizo.png
ouch. while first ~1500 pixels cut off, what's left shows , demands seen. pretty obnoxious! i'm kind of new mobile development, , love know devil i'm missing out on here. css div:
.grad{ overflow:auto; position:absolute; top:-1665px; left:-1448px; height:4000px; width:4000px; background-color: #1a82f7; background-color: #2f2727; background-image: url(images/radial_bg.png); background-position: center center; background-repeat: no-repeat; background: -moz-radial-gradient(circle, #1a82f7, #2f2727); background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2f2727)); background: -webkit-radial-gradient(circle, #1a82f7, #2f2727); -moz-border-radius:2000px 2000px 2000px 2000px; -webkit-border-radius:2000px 2000px 2000px 2000px; border-radius:2000px 2000px 2000px 2000px;
additionally, body set overflow:auto. appreciated! many in advance!
i'm not sure whether solve issue or not, it's i'd try next.
put in head section of html:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.8, maximum-scale=2.0" />
if results in background covering viewport find content small, try changing like:
<meta name="viewport" content="width=1280, initial-scale=1.0, minimum-scale=0.8, maximum-scale=2.0" />
Comments
Post a Comment