Redrawing elements ignores user-scalable=0 in Android Browser. Why?

问题

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>

回答1:

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:

You have some sort of CSS issue in defining your <div> elements - try playing around with position: fixed / absolute / relative until it is fixed.
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.

来源：https://stackoverflow.com/questions/16934048/redrawing-elements-ignores-user-scalable-0-in-android-browser-why

标签

javascript

android

jquery

redraw