重绘元素会在Android浏览器中忽略user-scalable = 0。 为什么？

这是元标记

问题 – 我想通过隐藏和取消隐藏容器

"改变方向时强制重绘（解决另一个问题）。 然而，一旦重绘，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

Answer 1

好吧……经过3天的挫折后，我终于找到了造成这种情况的原因，我不能说我很开心。 大多数情况下，因为问题是删除了一行。

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

normalize.css中的这段CSS在Android浏览器中引发了这个问题。

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

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

唯一允许的值是none dotted dashed solid double groove ridge inset outset inherit 。 虽然0可以评估为none ，但无论出于什么原因它都会打破缩放。

概括

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

1. 在定义

   元素时遇到某种CSS问题 – 尝试使用position: fixed / absolute / relative来解决它，直到它被修复。

2. 您正在体验这篇文章中描述的相同问题。 使用normalize.css和outline: 0

我希望这有助于拯救他们3天的生命。