Horizontal scrolling with error width = device width iscroll

Question

Sample code here: http://pastebin.com/95z3pftQ

I am trying to create a mobile page with a fixed title and a “content” section, which will be filled with external (disinfected, but otherwise arbitrary) HTML. I need to use iscroll or something like this, because I need to support vertical / horizontal scrolling and scaling , which has no native equivalent.

The problem is that with the directive width=device-width meta viewport, Mobile Safari resizes all block-level elements to the width of the screen, regardless of the width of their contents, unless they have a specified width. iscroll then looks at the width of the container (which is the width of the screen) and does not know that more content is required for horizontal movement. So in this example, the calculated width for div#container on my iPhone is 290 pixels, but the calculated width for table#really-wide-content is 1000 pixels.

Is it possible to disable the effects of the meta viewport directive inside a single div on a page? Please note that I can not know a priori how wide the content is or what its html structure is, although I can change the built-in styles programmatically if necessary.

Answer 1

Can you set the iScroll width at some point after loading, for example, this jQuery example:

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

via stack overflow

In any case, you can destroy and recreate iScroll after loading the page, as suggested here: How to set the dynamic width in iScroll for the scroller?

Also, is it possible to set the width of the viewport width=device-width after loading? Perhaps this will allow iScroll to load content allocation in the first place.