I am working on a responsive website which is powerplumb.com.au. For all phone resolutions, I am testing the responsiveness using the tool responsivetest.net. Everything looks perfectly fine for iPhone 5(Screen resolution of 320X568.
However, when I open the same site in Safari on iPhone 5 device, the output is not responsive.
Tried multiple things but it didn't work. What baffles me is that even with same resolution, why the output is different?
you need to add meta tag in your head section
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="/templates/sb_powerplumb/favicon.ico" />
<link rel="icon" type="image/ico" href="/templates/sb_powerplumb/favicon.ico" />
<base href="http://www.powerplumbhydronicheating.com.au/" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="hydronic heating, hydronic heating panel, hydronic heating system, hydronic heating panel installation, hydronic heating melbourne, australia" />
<meta name="author" content="Super User" />
<meta name="description" content="PowerPlumb installs Hydronic heating systems, including radiator panels in Melbourne, Australia. " />
<meta name="generator" content="Joomla! - Open Source Content Management" />
<title>Power Plumb Hydronic Heating</title>
<link href="/templates/sb_powerplumb/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<link rel="stylesheet" href="/plugins/editors/jckeditor/typography/typography2.php" type="text/css" />
<link rel="stylesheet" href="/components/com_rsform/assets/themes/green/css/style.css" type="text/css" />
<link rel="stylesheet" href="/components/com_rsform/assets/css/front.css" type="text/css" />
<script src="/components/com_rsform/assets/js/script.js?v=46" type="text/javascript"></script>
<script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
<script src="/media/system/js/core.js" type="text/javascript"></script>
<script src="/media/system/js/caption.js" type="text/javascript"></script>
<script src="/media/system/js/mootools-more.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('load', function() {
new JCaption('img.caption');
});
</script>
<link rel="stylesheet" href="/templates/sb_powerplumb/css/template.css" type="text/css" />
<script type="text/javascript" src="/templates/sb_powerplumb/js/CreateHTML5Elements.js"></script>
</head>