I am currently working on a website and facing an issue with the responsive image display on Safari for Mac/iPhone. Here is the code snippet I have been using:
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Language" content="es">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta property="og:locale" content="es">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>Reparación iPhone – iPad, iPod | iFixed</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
</head>
<body>
<nav><a href="http://www.ifixed.mx"><img src="LayerMain.png" style="max-width: 100% height: auto" /></a></nav>
Additionally, this is the CSS I have applied:
img {
max-width: 100% !important;
height: auto !important;
}