Mobile Site: Lack of horizontal scrolling on iPhone

StackOverflow https://stackoverflow.com/questions/7834086

문제

I've recently created a mobile version of my website. Generally things work fine, however I'm having some issues with mobile devices not scrolling horizontally on code snippets and with YouTube video embeds.

  1. I use SyntaxHighlighter to highlight the code on the site, as per the code examples on the site. This works great for desktop viewers, however on mobile the code cannot be scrolled through horizontally (cutting off large portions of important code).

  2. I use YouTube's iframe code to embed videos into article pages, however making the videos scale up and down correctly from desktop to mobile to fill the content container (or hit a maximum size) is proving difficult.

Any help on either of these problems would be greatly appreciated.

도움이 되었습니까?

해결책

  • For the Youtube video, is quite simple. In the iframe, add the following css style to it:
<style type="text/css">
    iframe.someClass {
        width:100%;
        max-width:NNNpx;
    }
</style>

Where NNN is the max width you want the iframe to have, normally the container of the desktop version or even some size you want.

With this code, the width of the iframe will be 100% of it's container, unless the container is bigger than the max-width size you've setup. If it's bigger, the max-width will take place.

This will cover most of the problems and ensure the width is always the maximum the container can have, when screen size is smaller than the max-width value.

  • For the horizontal scrolling issue: iOS' Mobile Safari normally stretches all elements with overflow:auto since it does not allow scrollbars in ANY way. The same would apply for a frameset for e.g. You can't have a fixed part and a scrolling part, because MSafari stretched both so all elements of each are visible.

Since your container have overflow:hidden, the snippet is stretched but hidden due this CSS property.

The only way to actually simulate scrollbars is by using some javascript framework. The best one is Cubiq's iScroll 4 ( http://cubiq.org/iscroll-4 ) that have support to multiple touch events and other nice options.

This way, you can make the code snippets to accept touch events and then be scrolled horizontal, vertically or both.

The most common usage is:

<script charset="utf-8" type="text/javascript">
    var myScroll = new iScroll('idOfWrapper', {
            //various options
    });
</script>

Since you got lots of snippets (using the example you gave), you could apply some kind of loop for each of them, using a jQuery.each().

Let's make an example. Using jQuery and iScroll, you could make the following:

HTML:

<html><head>
<title>Test</title>
<!-- include jquery and iscroll -->
</head><body>

<div id="divPretendingIsDeviceScreen" style="max-width:320px;overflow:hidden;">
    <h1>Header</h1>
    Lorem ipsum dolor sit amet.
    <br/><br/>
    <h2>Another header</h2>
    For example:<br/>
    <br/>
    <div class="divToBeScrolled">
    <pre>
    //This is a single-line comment
    //one bigger line to test one bigger line to test one bigger line to test one bigger line to test
    </pre>
    </div>
    <h2>Our first C++ program</h2>

    <div class="divToBeScrolled">
    <pre>
    /*
    This is a multi-line comment.
    It can have multiple lines!
    */
    //one bigger line to test one bigger line to test one bigger line to test one bigger line to test

    /*making
    vertical
    scroll
    //one bigger line to test one bigger line to test one bigger line to test one bigger line to test
    making
    vertical
    scroll
    //one bigger line to test one bigger line to test one bigger line to test one bigger line to test
    making
    vertical
    scroll
    //one bigger line to test one bigger line to test one bigger line to test one bigger line to test
    */
    </pre>
    </div>
    <br/>
    <br/>
    Lorem ipsum dolor sit amet.
</div>
</body></html>

CSS:

<style type="text/css">
    .scrollerType {
        overflow:hidden;
        max-height:200px;
        /* put max height you want the scroller div to have, 
        normally less than the device's window size, like 200px or so so.*/
    }

    div.divToBeScrolled {
        overflow:scroll;
        display:inline-block;
        white-space:pre-wrap;
    }
</style>

JS/jQUERY:

<script charset="utf-8" type="text/javascript">
    var snippetName = new Array(); //creates a new array to make the var names for iscroll
    var selfId = new Array(); //creates a new array to make the names for the scrollers

    $('.syntaxhighlighter').each(function(index) { //for each '.syntaxhighlighter' and 'index' as counter
        selfId[index] = 'scrollerId'+index; //creating a new id name for the container
        $(this).wrap('<div id='+selfId[index]+' class="scrollerType" />'); //wrapping each '.syntaxhighlighter' with the container
        var timeout = setTimeout(function(){ //yes, timeout. This to support Android mostly
            snippetName[index] = new iScroll(selfId[index], { //initializing multiple iscroll's each with an index and targeting the selfId
                //here you declare various options - see "Passing parameters to the iScroll" at iScroll page
                //this is the best set, i think
                snap: false,
                momentum: true,
                hScrollbar: false,
                vScrollbar: false,
                hScroll: true,
                vScroll: true,
                desktopCompatibility:true
            }); //end new iScroll
        },100); //100ms just bc 0ms or 1ms might not be enough

    }); //end .each
</script>

Since we need the iscrolls to take effect after the snippet highlighter has taken place, we can wrap the above code in a js function and add it as callback function at the snippet highlighter when it is done with the colors.

I think this will works. Made it now but the idea is right. Will test tonight and make the fixes if needed by editing the answer.

Well, i think that's it, feel free to ask if you don't understood a thing.

_*EDIT:*_

Fixed the JS code, added the codes for CSS and an the test-case HTML.

I've made a test-case
( http://portableideas.net/myRepo/trunk/stackoverflow/www/questions_7869572.html )

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top