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

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -