CODEWITHSUNDEEP
androidbrowserzoomingorientation
cierech
cierech

Reputation: 383

<meta name="viewport" ... tag does not work correctly on Android (Samsung Galaxy Tab 2) after orientation change

So I have this tag defined:

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

I also tried:

<meta name="viewport" content='width=device-width, initial-scale=1.0, user-scalable=no' />

On the Galaxy Tab 2 I was testing my website on - this correctly blocks any type of double-tap or pinch zooming.

But as soon as I change orientation - I can zoom in again! The behavior is strange as I can zoom in only, not out. And I can do it both with the double tap and pinch.

Changing orientation back does not fix the problem, every subsequent orientation change has this issue...

Anyone has seen this issue before?

Thanks!

cierech

Upvotes: 1

Views: 3888

Answers (3)

Iulian Anghel
Iulian Anghel

Reputation: 421

Had the same problem and solved it by switching to HTML5. That means:

<!DOCTYPE html>
<html lang="en">

Upvotes: 2

puiu
puiu

Reputation: 726

I'm facing the same problem without a solution. The logical conclusion is that the browser window must be resetting the meta back as "user-scalable=1" when I initially set it as " user-scalable=0".

The bug happens to me only when I'm using CSS transition3d to move the page content and reveal a sidebar underneath for off canvas menu (like Google mobile or Facebook mobile app). If I use negative margins to push the content, it doesn't happen at all in my testing.

One thing I've tried doing is to replace the meta viewport tag every time the user changes phone orientation. However, I am not sure if it is actually working or not since the bug seems to happen maybe every 6 page reloads + orientation to landscape. \

function updateMetaOrientationChange() {
     var viewport = document.querySelector("meta[name=viewport]");

     viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;')
}

Upvotes: 0

daniel
daniel

Reputation: 1433

Maybe you need to use the undocumented "target-densityDpi" as seen here: https://android.googlesource.com/platform/external/webkit/+/f10585d69aaccf4c1b021df143ee0f08e338cf31

Upvotes: 1

Related Questions