2

这是元标记

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

问题- 当通过隐藏和取消隐藏容器更改方向时，我想强制重绘（以解决另一个问题）<div id="redraw>"。然而，一旦发生重绘，Android 浏览器现在允许我放大，即使我已经设置了user-scalable=0.

为什么是这样？我的猜测是 Android 通过设置更改了重绘的元标记user-scalable=1。但事实并非如此，因为正如您在redrawOrientation()下面的函数中看到的，我将元标记更改回默认值。我通过仅在横向上重绘来做到这一点。

这对我来说似乎是一个错误。任何人都可以提出这个问题的原因吗？

Javascript

 function redrawOrientation() {

      viewport = document.querySelector("meta[name=viewport]");

      if (Math.abs(window.orientation) === 90) {      

           $('#redraw').hide().show(0);
           viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');

           alert("Landscape: maximum-scale=2.0");

      } else {       

           //$('#redraw').hide().show(0);
           viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');   

           alert("Portrait: maximum-scale=1.0");

      }
 }

 window.onorientationchange = redrawOrientation;

HTML

<div id="redraw">
     <div id="sidebar"></div>
     <div id="content"></div>
</div>
4

1 回答 1

3

嗯......经过 3 天的挫折后，我终于找出了造成这种情况的原因，我不能说我很高兴。主要是因为问题是删除了一行。

我开始删除所有零碎的东西，直到问题消失。当我删除 normalize.css 时，我发现在方向更改后我不再出现放大问题。

normalize.css 中的这段 CSS 导致了 Android 浏览器中的问题。

a:active,
a:hover {
     outline: 0;
}

删除outline: 0也修复了缩放问题。根据 W3C ( http://www.w3.org/wiki/CSS/Properties/outline-style ) ，赋予0to的属性outline不是允许的值之一。

唯一允许的值是none dotted dashed solid double groove ridge inset outset inherit。尽管0评估结果可能与 相同none，但无论出于何种原因，它都会破坏缩放。

回顾

如果其他人在这里偶然发现为什么他们的 Android 浏览器似乎重新启用user-scalable=0了user-scalable=1，原因如下：

  1. 您在定义元素时遇到了某种 CSS 问题<div>- 尝试使用position: fixed / absolute / relative直到它被修复。
  2. 您正在经历这篇文章中描述的相同问题。使用 normalize.cssoutline: 0

我希望这有助于挽救某人 3 天的生命。

于 2013-06-05T17:59:24.987 回答