I am trying out the following HTML code on iOS Safari:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>HTML5 test</title>
</head>
<body>
<img src="image.jpg" width="100" alt="Image" />
</body>
</html>
It looks fine on desktop browser. On iOS Safari (iOS 5, iPhone) though, the image width is 200px. As I used viewport with scale 1.0 it should be 100px too but it is not – any ideas why?
The logical pixels in the browser is two actual screen pixels, because the screen is so small relative to its resolution.
Using scale 1.0 gives you a relation 1 to 1 between image pixels and logical pixels, and a relation 1 to 2 between image pixels and actual screen pixels.