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