1

最近、自分のWebサイトのモバイルバージョンを作成しました。通常は問題なく動作しますが、コードスニペットでモバイルデバイスが水平方向にスクロールしない場合や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のモバイルSafariは、スクロールバーをまったく許可しないため、通常、overflow：autoを使用してすべての要素を拡大します。同じことがフレームセットにも当てはまります。たとえば、MSafariは両方を引き伸ばしてそれぞれのすべての要素が表示されるため、固定部分とスクロール部分を作成することはできません。

コンテナにはoverflow：hiddenがあるため、スニペットは引き伸ばされますが、この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 に答える