iOS css error after I change some css style by jquery

Question

At first, I have set user-scalable=no and width=device-width.

My meta content is <meta content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />

And the begin view like this.

When I click a button in an div and change the css style width $('#A').toggleClass('B'). Then the view like this.

The buttons in a div container. The div contain is the same size as device and it's css overflow: hidden.

After I click a button and change its style. Both overflow and user-scalable=no are fail.

How to deal with it?

Answer 1

I have found the answer.

See here: How do I reset the scale/zoom of a web app on an orientation change on the iPhone?

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
    viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
    document.body.addEventListener('gesturestart', function () {
        viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
    }, false);
}

}