Question

我的网页运行得非常顺利，直到Apple今天推出iOS 7，并且在屏幕方向改变时打破了布局。

基本上，当我将焦点放在文本区域并将屏幕旋转到横向视图时，整个页面会放大。如果从文本区域取出焦点并转回“纵向”，则事情会恢复正常。

当文本区域没有焦点时，旋转也很有效。

我已经有了以下元标记（以确保我们阻止缩放）：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0;;">

任何想法导致这种尴尬的行为？

Answer 1

你对“破碎布局”的看法是什么？我想看一个截图！

我在网站上看到的唯一一件事就是表单元素已经离开视图，因为内容长度正在改变。我正在谈论一个响应式设计。也许有一个JS来解决这个问题......

我不会阻止网站的缩放，除非它是一个模拟应用程序的工具或者客户想要它。 ;）

但是我在使用jQuery聚焦表单元素时会阻止标准缩放，或者如果没有使用jQuery则使用JS！

$("input[type=text], textarea, select").focus(function(){
        $('head meta[name=viewport]').remove();
        $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;" />');
     }).blur(function(){
        $('head meta[name=viewport]').remove();
        $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1;" />');
});

在iOS 7中自动缩放方向更改

1 个答案: