css - How to make iPad auto-scale large-width element which also has overflow: scroll to full displayed? -
at first, i'm not developing responsive design page. didn't add
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
here codes:
css:
<style> section { width: 1250px; height: 800px; background: url(http://placehold.it/1250x800) no-repeat 50% top; } </style>
html:
<div class="container"> <section></section> <section></section> <section></section> <section></section> </div>
when visit these ipad, <section>
s auto-scaled fit ipad screen. not need scroll horizontally watch full images. want.
however, if add overflow
.container
, ipad don't auto-scale page anymore:
.container { overflow-y: scroll; }
i'm going implement scroll effect on ipad. ipad not fire "scroll" event of "window" before scroll action stops, have scroll content of page in large overflow-y: scroll;
element.
does know how fix this? need ipad auto scale down display full-width, no need scroll horizontally.
if understand correctly, you'll want start setting height:100%;
on containers. if set container height 100%, take height of whatever screen it's on. then, setting section
heights 100% make them fill in same space @ 100% of screen size. orient images 100% still let scroll
Comments
Post a Comment