Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Viewport meta tag not working in iPhone and Android

I am using the following html code

<!DOCTYPE HTML>
  <html>
    <head>
     <title>test</title>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    </head>
    <body>
    test
    </body>
  </html>

My intention is to prevent user from zooming in or out. The above code isn't working in iPhone and Android. Any solution ?

EDIT: It appears in iPhone settings, if Zoom is selected as On under Settings>Accessibility>Zoom, then this will override meta tag. Source

Not sure why it is happening in android.

like image 472
Prabhat Avatar asked May 28 '12 11:05

Prabhat


2 Answers

I use this tag to prevent zoom on all mobile platforms :

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

With , and not ;

like image 92
ChristopheCVB Avatar answered Sep 30 '22 10:09

ChristopheCVB


In my part, I've this "viewport" which work good on an Android (Nexus 5) and on iPhone.

<meta name="viewport" content="width=device-width; initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5; " />

I hope this help you !

like image 43
Joffrey Outtier Avatar answered Sep 30 '22 10:09

Joffrey Outtier