2

初期のビューポイント設定よりも広くなければならないdiv要素を挿入するフォームから情報を返すときに、現在iphone（3/4 / 4s）でビューポートの設定に苦労しています。

何が起こっているのかを正確に単純化するために、以下に非常に基本的なデモを含めましたが、それはiphoneで表示した場合にのみ意味があります（画面の幅が広いため、通常のコンピューターブラウザーでは問題なく表示されます。

または簡単に言えば：

1）ビューポートは次のように設定されています。<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">

これにより、iphone 4sでは、Webページを表示したときの初期幅が320ピクセルになります。

2）jquery（ajaxリクエスト）を使用してページでフォームを送信すると、ajaxリクエストは500ピクセル幅でなければならないdivを含むhtmlコードを返します。これは現在のWebページに挿入されます。

3）ビューポートが小さすぎて、この挿入されたdiv要素の幅全体を表示できません。

4）ビューポートを動的にリセットするか、ズームアウトして、ユーザーが手動で何もしなくてもこの新しいdivが表示されるようにするにはどうすればよいですか？

5）（このdivはページの上部に挿入され、その下にフォームが残ります。ユーザーをページの上部に再配置することは可能ですか？window.scrollTo（0、0）;は機能すると思いますが、私はわからない。）

これは非常に簡単なデモですが、これはiPhoneで表示する必要があります。

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
        <style>
            #clickbox { background:yellow; display: block;}
            .box { background: red; width: 500px; height:200px; border: 2px solid; margin: 5px}
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <div id="clickbox"><button id="button">Click me!</button></div>
        <script>     
            $("#button").click(function (){
                $("#clickbox").before( "<div class='box'>Oh look at me! I'm too wide, how can I reset the view point to view my complete width!?</div>" );
            });
        </script>
    </body>
</html>

あなたがそれをより簡単に見つけるならば、このコードはすでにここでオンラインになっています：

私が試したこと：

  1. メタビューポートタグの複数のバリエーション。文字通り、初期/最小/最大スケールの約20の異なる組み合わせ。
  2. 次のようなコンテンツdivのjqueryminupulation： $('a').bind('click',function(event){ $("#viewport").prop("content","width=550, maximum-scale = 1") });
  3. 他のさまざまなクレイジーなアイデア。正しく動作するものはありません。

任意の提案やポインタは非常に高く評価されています。ありがとうございました。

4

1 に答える 1

0

.attr代わりに使ってみるべきだと思います.prop

これはたとえば機能しますが、他の要素の設定を試す必要があります。

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
        <style>
            #clickbox { background:yellow; display: block;}
            .box { background: red; width: 640px; height:200px; border: 2px solid; margin: 5px}
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <div id="clickbox"><button id="button">Click me!</button></div>
        <script>     
            $("#button").click(function (){
                $('#viewport').attr('content', 'width=device-width, initial-scale=0.5');
                $("#clickbox").before( "<div class='box'>Oh look at me! I'm too wide, how can I reset the view point to view my complete width!?</div>" );
            });
        </script>
    </body>
</html>

前に追加された新しい行を参照してください$('#clickbox')...：

$('#viewport').attr('content', 'width=device-width, initial-scale=0.5');

これが正しい道に沿ってあなたを助けることを願っています。

于 2012-07-31T10:34:00.070 に答える