当jquery向网页添加宽元素时，在iPhone iPad上动态重置视口

当我从一个插入div元素的表单返回信息时，我目前正在为iphone（3/4/4s）的视口设置而苦苦挣扎，该元素必须比初始视点设置宽。

我在下面包含了一个非常基本的演示，以简化正在发生的事情，但它只有在用iphone观看时才有意义（在普通电脑浏览器上看起来很好，因为你的屏幕有额外的宽度。

或者简单地说：

1）我的视口设置为：<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">

这使得iphone4s在浏览网页时的初始宽度为320像素。

2）当我使用jquery（ajax请求）在页面上提交表单时，ajax请求返回一些html代码，其中包含一个必须为500像素宽的div。这会插入到当前网页中。

3）现在，视口太小，无法看到这个插入的div元素的整个宽度。

4）我如何动态重置视口或缩小以确保我可以看到这个新的div，而无需用户手动执行任何操作？

5）（这个div被插入到页面的顶部，将表单留在它下面。是否可以将用户重新定位到页面的顶端？我认为是window.rollTo（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>

如果你觉得更容易，这个代码已经在线了：

我尝试过的：

元视口标记的多种变体。从字面上看，大约有20种不同的初始/最小/最大刻度组合
jquery内容div的减法如下：$('a').bind('click',function(event){ $("#viewport").prop("content","width=550, maximum-scale = 1") });
其他各种疯狂的想法。没有一个能正常工作

非常感谢任何建议或建议。非常感谢。

我认为您应该尝试使用.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');

我希望这能帮助你走上正确的道路。

相关内容

最新更新

热门标签：