I experienced this problem for weeks for the app we are developing. Following are the HTML code I use in iOS webview:
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1' />
<style>
body {margin: 0; padding: 0;}
img {width:100%; height:auto; margin:0; padding: 0;}
</style>
</head>
<body>
<img src='http://hostname/image.jpg' />
</body>
</html>
I googled it and sb said that we should use multiple images for different devices: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html and Serving non-Retina and Retina displays with one code base: framework for scaling layouts and assets for HTML5 apps on iPhones or iOS devices? .
But the question is: why when I switch to use imageview, the same image displays well without blurry?
I also tried the android solution: Android local image displayed via webview is blurry but it does not work for iOS.
