StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Well, the above metas are useful as such:</p> <pre><code><meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="minimum-scale=1.0, width=device-width, maximum-scale=1, user-scalable=no" name="viewport" /> </code></pre> <p>They prevent that bug in Safari that happens when the user rotates the screen. However, the most proper way to accomplish the desired functionality is:</p> <ul> <li><p>Use a parent div with overflow hidden and make sure the height of this div is limited according to the viewport and a child div with overflow:auto or the css 3 overflow-y:scroll. So basically if the size of the content inside the child div exceeds the default size of the child, you can vertically/horizontally scroll through it. Because the parent has overflow:hidden, the content outside of the child will not be displayed, so you get a proper scroll effect. ** Also, if you use overflow: hidden and prevent default for all touchEvents, there will be no scrolling or weird browser behavior**</p></li> <li><p>With the help of JavaScript, make sure that every element in the DOM is scaled according to the viewport, so avoid using static sizes for as many elements as possible. </p></li> <li><p>Bind the touchStart, touchMove and touchEnd events. Safari doesn't always fire a touchEnd event unless a touchMove event is listened for as well. Even if it's just a placeholder, put it there to avoid the inconsistent behavior in Safari.</p></li> <li><p>Horizontal sliding is possible in two ways: load new content in the same div after you detect the slide direction or populate that child div with all the elements and you are good to go and actually shifting the margins/position of the child inside it's parent to 'scroll'. Animation can be used for a slicker interface.</p></li> <li><p>Bind your touch event listeners. I don't know what library or event management system you are using, but it doesn't matter. Just call the respective function for the respective task.</p></li> <li>Get the slide direction(left/right):</li> </ul> <pre><code>var slideBeginX; function touchStart(event){event.preventDefault();//always prevent default Safari actions slideBeginX = event.targetTouches[0].pageX; }; function touchMove(event) { event.preventDefault(); // whatever you want to add here }; function touchEnd(event) { event.preventDefault(); var slideEndX = event.changedTouches[0].pageX; // Now add a minimum slide distance so that the links on the page are still clickable if (Math.abs(slideEndX - slideBeginX) > 200) { if (slideEndX - slideBeginX > 0) { // It means the user has scrolled from left to right } else { // It means the user has scrolled from right to left. }; }; }; </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload