1

我最近创建了我的网站的移动版本。一般来说，一切正常，但是我遇到了一些问题，即移动设备无法在代码片段上水平滚动以及 YouTube 视频嵌入。

  1. 根据网站上的代码示例，我使用SyntaxHighlighter突出显示网站上的代码。这对桌面查看器非常有用，但是在移动设备上代码不能水平滚动（切断大部分重要代码）。

  2. 我使用 YouTube 的 iframe 代码将视频嵌入到文章页面中，但是事实证明，让视频从桌面到移动设备正确地放大和缩小以填充内容容器（或达到最大尺寸）是很困难的。

任何对这些问题的帮助将不胜感激。

4

1 回答 1

0
  • 对于 Youtube 视频，非常简单。在 iframe 中，添加以下 css 样式：
<style type="text/css">
    iframe.someClass {
        width:100%;
        max-width:NNNpx;
    }
</style>

NNN 是您希望 iframe 拥有的最大宽度，通常是桌面版本的容器，甚至是您想要的某个大小。

使用此代码，iframe 的宽度将是其容器的 100%，除非容器大于您设置的最大宽度大小。如果它更大，将发生最大宽度。

当屏幕尺寸小于 max-width 值时，这将涵盖大部分问题并确保宽度始终是容器可以拥有的最大值。

  • 对于水平滚动问题：iOS 的 Mobile Safari 通常会使用 overflow:auto 拉伸所有元素，因为它不允许以任何方式滚动条。这同样适用于框架集，例如，您不能有固定部分和滚动部分，因为 MSafari 拉伸了两者，因此每个元素的所有元素都是可见的。

由于您的容器具有溢出：隐藏，因此该片段被拉伸但由于此 CSS 属性而隐藏。

实际模拟滚动条的唯一方法是使用一些 javascript 框架。最好的是 Cubiq 的 iScroll 4 ( http://cubiq.org/iscroll-4 )，它支持多个触摸事件和其他不错的选项。

这样，您可以使代码片段接受触摸事件，然后水平、垂直或同时滚动。

最常见的用法是：

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

由于您有很多片段（使用您提供的示例），您可以使用 jQuery.each() 为每个片段应用某种循环。

让我们举个例子。使用 jQuery 和 iScroll，您可以进行以下操作：

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>

由于我们需要在代码段高亮发生后使 iscrolls 生效，我们可以将上述代码包装在一个 js 函数中，并在完成颜色后将其作为回调函数添加到代码段高亮。

我认为这会奏效。现在成功了，但想法是对的。今晚将进行测试，并在需要时通过编辑答案进行修复。

嗯，我想就是这样，如果你不明白的事情随时问。

_*EDIT:*_

修复了 JS 代码，添加了 CSS 代码和测试用例 HTML。

我做了一个测试用例
（http://portableideas.net/myRepo/trunk/stackoverflow/www/questions_7869572.html）

于 2011-10-25T22:17:31.380 回答