I have developed a mobile web site and it shows perfectly to me in Android and iPhone emulator. However, when I try to view it on an Android phone or iPhone, it displays the website as a normal desktop web site viewed on phone with very high widths and fonts appearing very small. The issue gets resolved, if I double click/tap on my screen.
Any help would be greatly appreciated.
I got this on Stack Overflow, but not much sure about it.
You need to add a meta tag named "viewport" see sample below
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />
</head>
<body style='background-color:white;font-family:Arial,Tahoma,Verdana;'>
</body>
</html>