iScroll 4: Allow users to zoom out from page content as well as zoom in

Question

I am trying to implement a mobile website with the following appearance:

1. a fixed header
2. scrollable, zoomable content
3. content zoomed out when page is first loaded

I have been experimenting with IScroll 4 and the results seem good but there is one problem that I can't find a way around. The contents of my pages are user-generated html tables which are often wider than the screen. I would like the full width of the table to be visible when the user lands on the page. They can then zoom in if they want to.

If you look at the IScroll zoom demo in a mobile browser it demonstrates the problem. The page content is wider than the screen and it's not possible to zoom out, only zoom in.

Changing the initial-scale in the viewport meta tag doesn't help as the whole page, including the header, gets zoomed out:

<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=yes, minimum-scale=0.5, maximum-scale=1.0">

(the header will eventually be a JQueryMobile element which I don't want to mess with).

And modifying the zoomMin setting in iscroll.js (v4.2.2, line 119) from 1 to something smaller (e.g. 0.5) breaks things:

// Zoom
zoom: false,
zoomMin: 1,
zoomMax: 4, 

You can zoom out further but the content then gets stuck and you can't resize it without reloading the page.

Does anyone know a way around this? I'm happy to try other frameworks if necessary.

Dentilingual

Did you actually get this to work? I'm adding the lines from @user1290746 below, and when I zoom I n, my "fixed" headers/footers go off-screen. – Martica

Answer 1

To allow zooming out, you can use the zoomMin and zoomMax that you identified, but do it when you instantiate iscroll, rather than modifying iscroll.js:

 <script type="text/javascript">
    var myScroll;
    function loaded() {
       myScroll = new iScroll('wrapper',
                       { zoom:true, onBeforeScrollStart: null, 
                         zoomMin:0.5, zoomMax: 6 });
    }

    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    document.addEventListener('DOMContentLoaded', loaded, false);
</script>

I also found I needed to explicitly set the width of the 'scroller' div, like so:

$('#scroller').width(your_width);

Downhill