Sitio móvil: falta de desplazamiento horizontal en iPhone

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

Pregunta

Recientemente he creado una versión móvil de mi sitio web.En general, las cosas funcionan bien, sin embargo, tengo algunos problemas con los dispositivos móviles que no se desplazan horizontalmente en los fragmentos de código y con las inserciones de videos de YouTube.

  1. Utilizo SyntaxHighlighter para resaltar el código en el sitio, según los ejemplos de código en elsitio.Esto funciona muy bien para los espectadores de escritorio, sin embargo, en dispositivos móviles, el código no se puede desplazar horizontalmente (cortando grandes porciones de código importante).

  2. Utilizo el código iframe de YouTube para insertar videos en páginas de artículos, sin embargo, hacer que los videos se escalen hacia arriba y hacia abajo correctamente desde el escritorio al dispositivo móvil para llenar el contenedor de contenido (o alcanzar un tamaño máximo) está resultando difícil.

Cualquier ayuda con cualquiera de estos problemas será muy apreciada.

¿Fue útil?

Solución

  • Para el video de Youtube, es bastante simple. En el iframe, agréguele el siguiente estilo CSS: 
<style type="text/css">
    iframe.someClass {
        width:100%;
        max-width:NNNpx;
    }
</style>

Donde NNN es el ancho máximo que desea que tenga el iframe, normalmente el contenedor de la versión de escritorio o incluso el tamaño que desee.

Con este código, el ancho del iframe será el 100% de su contenedor, a menos que el contenedor sea más grande que el tamaño de ancho máximo que ha configurado. Si es más grande, se aplicará el ancho máximo.

Esto cubrirá la mayoría de los problemas y garantizará que el ancho sea siempre el máximo que puede tener el contenedor, cuando el tamaño de la pantalla sea menor que el valor de ancho máximo.

  • Para el problema del desplazamiento horizontal: El Safari móvil de iOS normalmente estira todos los elementos con desbordamiento: automático ya que no permite barras de desplazamiento de NINGUNA manera. Lo mismo se aplicaría a un conjunto de marcos, por ejemplo, No puede tener una parte fija y una parte de desplazamiento, porque MSafari estiró ambas para que todos los elementos de cada una sean visibles.

Dado que su contenedor tiene overflow: hidden, el fragmento se estira pero se oculta debido a esta propiedad de CSS.

La única forma de simular barras de desplazamiento es utilizando algún marco de JavaScript. El mejor es iScroll 4 de Cubiq ( http://cubiq.org/iscroll-4 ) que tiene soporte a múltiples eventos táctiles y otras buenas opciones.

De esta manera, puede hacer que los fragmentos de código acepten eventos táctiles y luego se desplacen horizontalmente, verticalmente o ambos.

El uso más común es: 

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

Como tiene muchos fragmentos (usando el ejemplo que dio), puede aplicar algún tipo de bucle para cada uno de ellos, usando un jQuery.each ().

Pongamos un ejemplo. Con jQuery e iScroll, puede hacer lo siguiente:

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>

Dado que necesitamos que los iscrolls surtan efecto después de que se haya realizado el resaltador del fragmento, podemos envolver el código anterior en una función js y agregarlo como función de devolución de llamada en el resaltador del fragmento cuando haya terminado con los colores.

Creo que esto funcionará. Lo hice ahora, pero la idea es correcta. Probará esta noche y hará las correcciones si es necesario editando la respuesta.

Bueno, creo que eso es todo, no dude en preguntar si no entendió nada.

_*EDIT:*_

Se corrigió el código JS, se agregaron los códigos para CSS y el HTML del caso de prueba.

He creado un caso de prueba
( http://portableideas.net/myRepo/trunk/stackoverflow/www/questions_7869572. html )

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top