Question

当我从插入div元素的表单返回信息时，我正在努力使用iphone（3/4 / 4s）设置视口设置必须比初始视点设置更宽

我在下面添加了一个非常基本的演示，以简化正在发生的事情，但只有在使用iphone观看时才有意义（由于屏幕的额外宽度，在普通计算机浏览器上看起来很好。

或者简单来说：

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

在观看网页时，iphone 4s的初始宽度为320像素。

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

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>

如果您觉得更容易，则此代码已经online here：

我尝试了什么：

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

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

Answer 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');

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

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

1 个答案: