重绘元素忽略用户可扩展性= 0的Andr​​oid浏览器。为什么？ [英] Redrawing elements ignores user-scalable=0 in Android Browser. Why?

问题描述

这是meta标签

 ＆LT; META NAME =视口内容=WIDTH =装置宽度，初始规模= 1.0，最小规模= 1.0，最大规模= 1.0，用户可升级= 0＆GT;
 

问题 - 我想强制重绘（来解决另外一个问题）时，方向是由隐藏和取消隐藏容器＆LT改变; DIV ID =重绘＆gt;中。一旦发生重绘然而，Android浏览器现在可以让我放大，即使我已经建立用户可升级= 0 。

这是为什么？我的猜测是，机器人已经通过设置用户可升级= 1 改变了meta标签上重绘。但这种情况并非如此，因为你可以在函数 redrawOrientation（）下面，我改变了meta标签回默认看。我通过重画上只​​有横向这样做。

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

Javascript的

 函数redrawOrientation（）{

      视= document.querySelector（元[名称=视]）;

      如果（Math.abs（window.orientation）=== 90）{

           。$（'＃重绘）隐藏（）显示（0）;
           viewport.setAttribute（内容，宽度=设备的宽度，初始规模= 1.0，最大规模= 1.0，用户可扩展= 0'）;

           警报（山水：最大规模= 2.0）;

      } 其他 {

           //$('#redraw').hide().show(0）;
           viewport.setAttribute（内容，宽度=设备的宽度，初始规模= 1.0，最大规模= 1.0，用户可扩展= 0'）;

           警报（人像：最大规模= 1.0）;

      }
 }

 window.onorientationchange = redrawOrientation;
 

HTML

 ＆LT; D​​IV ID =重绘＆GT;
     ＆LT; D​​IV ID =侧边栏＆GT;＆LT; / DIV＆GT;
     ＆LT; D​​IV ID =内容＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

唉...无奈后第3天，我终于找到什么导致这一点，我不能说我很高兴。大多数情况下，因为这个问题是删除一行。

我开始删去一块吃饭，直到问题就走了。我发现，当我删除normalize.css，我不再有放大的方向改变后的问题。

这一块的CSS normalize.css的Andr​​oid浏览器所造成的问题。

  A：积极，
答：悬停{
     概要：0;
}
 

删除概述：0 也是固定的缩放问题。给予 0 到概述不是根据W3C的允许值之一（的 http://www.w3.org/wiki/CSS/Properties/outline-style ）。

唯一允许的值是无点缀虚线实双槽脊插图一开始就继承。虽然 0 可以评估相同无，不管是什么原因它打破缩放。

小结

如果任何人都曾经在这里跌倒尝试，为什么他们的Andr​​oid浏览器似乎重新启用用户可升级= 0 到用户可找出可扩展性= 1 ，这些都是原因：

1. 您在定义某种CSS问题的＆LT; D​​IV＆GT; 元素 - 尝试与玩弄的位置是：固定/绝对/相对，直到它是固定的。
2. 您正在experiecing在这篇文章中描述兴田同样的问题。使用normalize.css与概述：0

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

This is the meta tag

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

Problem - I wanted to force a redraw (to solve another problem) when the orientation was changed by hiding and unhiding a container <div id="redraw>". Once redraw occurs however, the Android browser now allows me to zoom in even though I had set user-scalable=0.

Why is this? My guess was that Android had changed the meta tag on redraw by setting user-scalable=1. But this was not the case, because as you can see in the function redrawOrientation() below, I change the meta tag back to default. I did this by redrawing on landscape orientation only.

This seems like a bug to me. Can anyone suggest a reason for this issue?

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>

解决方案

Well... after 3 days of frustration I finally find out what's causing this, and I can't say I'm very happy. Mostly, because the problem was the deletion of one line.

I started deleting everything piece meal until the problem went away. I found out when I deleted normalize.css that I no longer got zoom in issues after orientation change.

This piece of CSS in normalize.css caused the issue in Android Browser.

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

Removing outline: 0 also fixed zoom problem. Giving the property of 0 to outline is not one of the allowable values per the W3C (http://www.w3.org/wiki/CSS/Properties/outline-style).

The only allowable values are none dotted dashed solid double groove ridge inset outset inherit. Although 0 may evaluate the same as none, for whatever reason it breaks zooming.

Recap

If anyone else ever stumbles here trying to figure out why their Android browser appears to be re-enabling user-scalable=0 to user-scalable=1, these are the reasons why:

1. You have some sort of CSS issue in defining your <div> elements - try playing around with position: fixed / absolute / relative until it is fixed.
2. You are experiecing hte same problem described in this post. Using normalize.css with outline: 0

I hope this helps save someone 3 days of their life.

这篇关于重绘元素忽略用户可扩展性= 0的Andr​​oid浏览器。为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！