0

I made a very simple site www.abasi.info/viewport

Consists out of: 

<!DOCTYPE html>

<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<p><img alt="18" src="18.gif" style="height:55px; width:550px;"></p>



</body>
</html>

The numbers should go until 18. But with my Android Phone (Version 2.3.6) the viewport doesn't adjust. It is zoomed in to much. I just had this one picture in the site (nothing else). And if the above viewport would work it would show all the numbers in the pictures until 18. It is very strange.

Janik.cc
  • 11
  • 3
  • have you added @media all (){} in css styleheet – Vitorino fernandes Sep 28 '14 at 13:36
  • To make it responsive you want to add `max-width: 100%;`.. – Luke Sep 28 '14 at 13:42
  • @Vitorino This above code is everything that I added and should make the site to the device with and not cut it off, right? – Janik.cc Sep 28 '14 at 13:58
  • possible duplicate of [Responsive Images with CSS](http://stackoverflow.com/questions/11736363/responsive-images-with-css) – Luke Sep 28 '14 at 14:02
  • @Doctus I don't want that the picture adjust to the screen. It is about another site that should not be smaller than 550px and I am trying to have the whole site to be the same size like the device. – Janik.cc Sep 28 '14 at 14:02
  • Then add `min-width: 550px` and `max-width: 100%` – Luke Sep 28 '14 at 14:03

1 Answers1

0

You need to make the Image 100% width and auto height, so the ratio won't mess up.

example -

img{
    width:100%;
    height:auto;
}

http://jsfiddle.net/1n9jnaxw/

you also can use max-width, but make sure you define the image dimensions first.

To limit the viewport to 550px you will have to change it to-

<meta name="viewport" content="width=550, maximum-scale=1, user-scalable=no">
Artipixel
  • 1,246
  • 14
  • 17