Sito mobile: mancanza di scorrimento orizzontale su iPhone

https://stackoverflow.com/questions/7834086

27-10-2019
|

Domanda

Di recente ho creato una versione mobile del mio sito web.In genere le cose funzionano bene, tuttavia ho dei problemi con i dispositivi mobili che non scorrono orizzontalmente sugli snippet di codice e con i video incorporati di YouTube.

Utilizzo SyntaxHighlighter per evidenziare il codice sul sito, come da esempi di codice sulposto.Funziona alla grande per i visualizzatori desktop, tuttavia sui dispositivi mobili non è possibile scorrere il codice in orizzontale (tagliando grandi porzioni di codice importante).
Utilizzo il codice iframe di YouTube per incorporare i video nelle pagine degli articoli, tuttavia aumentare e ridurre le dimensioni dei video correttamente dal desktop al dispositivo mobile per riempire il contenitore dei contenuti (o raggiungere una dimensione massima) si sta rivelando difficile.

Qualsiasi aiuto su uno di questi problemi sarebbe molto apprezzato.

Soluzione

Per il video di Youtube, è abbastanza semplice. Nell'iframe, aggiungi il seguente stile CSS:

<style type="text/css">
    iframe.someClass {
        width:100%;
        max-width:NNNpx;
    }
</style>

Dove NNN è la larghezza massima che vuoi che abbia l'iframe, normalmente il contenitore della versione desktop o anche una certa dimensione che desideri.

Con questo codice, la larghezza dell'iframe sarà il 100% del suo contenitore, a meno che il contenitore non sia più grande della dimensione di larghezza massima che hai impostato. Se è più grande, verrà applicata la larghezza massima.

Questo coprirà la maggior parte dei problemi e garantirà che la larghezza sia sempre la massima che il contenitore può avere, quando la dimensione dello schermo è inferiore al valore della larghezza massima.

Per il problema dello scorrimento orizzontale: Mobile Safari di iOS normalmente estende tutti gli elementi con overflow: auto poiché non consente le barre di scorrimento in NESSUN modo. Lo stesso varrebbe per un set di frame per es. Non puoi avere una parte fissa e una parte scorrevole, perché MSafari ha allungato entrambe in modo che tutti gli elementi di ciascuna siano visibili.

Poiché il tuo contenitore ha overflow: hidden, lo snippet è allungato ma nascosto a causa di questa proprietà CSS.

L'unico modo per simulare effettivamente le barre di scorrimento è utilizzare un framework javascript. Il migliore è iScroll 4 di Cubiq ( http://cubiq.org/iscroll-4 ) che offre supporto a più eventi touch e altre belle opzioni.

In questo modo, puoi fare in modo che gli snippet di codice accettino eventi di tocco e quindi vengano fatti scorrere orizzontalmente, verticalmente o entrambi.

L'utilizzo più comune è:

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

Dato che hai molti snippet (usando l'esempio che hai fornito), potresti applicare una sorta di ciclo per ciascuno di essi, utilizzando jQuery.each ().

Facciamo un esempio. Utilizzando jQuery e iScroll, potresti fare quanto segue:

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>

Poiché abbiamo bisogno che le iscroll abbiano effetto dopo che l'evidenziatore di snippet ha avuto luogo, possiamo racchiudere il codice sopra in una funzione js e aggiungerlo come funzione di callback all'evidenziatore di snippet quando ha finito con i colori.

Penso che funzionerà. L'ho fatto ora, ma l'idea è giusta. Testerà stasera e apporterà le correzioni, se necessario, modificando la risposta.

Beh, penso che sia tutto, sentiti libero di chiedere se non hai capito niente.

_*EDIT:*_

Risolto il problema con il codice JS, aggiunti i codici per CSS e un test-case HTML.

Ho creato un test-case
( http://portableideas.net/myRepo/trunk/stackoverflow/www/questions_7869572. html )

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow