Question

我最近创建了我的网站的移动版本。一般情况下工作正常，但我在移动设备上遇到一些问题，而不是在代码片段和YouTube视频嵌入时水平滚动。

根据网站上的代码示例，我使用SyntaxHighlighter突出显示网站上的代码。这对于桌面查看器非常有用，但是在移动设备上，代码无法水平滚动（切断大部分重要代码）。
我使用YouTube的iframe代码将视频嵌入到文章页面中，但是让视频从桌面到移动设备正确缩放以填充内容容器（或达到最大尺寸）证明是困难的。

非常感谢任何有关这些问题的帮助。

Answer 1

对于Youtube视频，非常简单。在iframe中，为其添加以下css样式：

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

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

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

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

对于水平滚动问题： 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。

我做了test-case （http://portableideas.net/myRepo/trunk/stackoverflow/www/questions_7869572.html）

移动网站：iPhone上缺少水平滚动

1 个答案: