2

当我从插入必须比初始视点设置宽的 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>

如果您发现它更容易，此代码已在此处在线：

我试过的：

  1. 元视口标签的多种变体。从字面上看，大约有 20 种不同的初始/最小/最大比例组合。
  2. 内容 div 的 jquery minupulation 如下所示： $('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 回答