CODEWITHSUNDEEP
htmlcss
lurning too koad
lurning too koad

Reputation: 2964

Responsive website: not scaling properly on mobile device

I am using the following two methods for a responsive website.

HTML

<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

CSS

img {
    max-width:100%;
}

However, when it loads on a smartphone, it appears to be too zoomed in. The widest image on this website is 240px but it takes up the entire screen on an iPhone 5 which has a viewport of 640px. How do I correct this?

Upvotes: 3

Views: 4234

Answers (1)

the_velour_fog
the_velour_fog

Reputation: 2184

Thats what the viewport meta tag does. the HTML attribute:

content="width=device-width"

Instructed the browser to configure its viewport to the devices screen width - in "dips" (device independent pixels) - not physical pixels.
In the case if the iphone 5 - I believe thats 320 px. you could test this by adding this script to the bottom of your HTML

<script>
    var el = document.createElement('h2');
    el.textContent = window.innerWidth;
    document.body.appendChild(el);
</script>

If not familiar with dips, you can think of them as approximating the pixel density of a "classic" computer monitor as a way of getting around the fact that current device screen's have different physical resolutions, so dips were created to provide a level playing field for developers.
The CSS engine will then base its calculations on the HTML element being 320 pixels wide.
In that case an image whose width is defined in CSS at 240 CSS pixels wide would take up most of the screen width.
As an aside, in order to maximumise image sharpness most leading mobile browsers are smart enough to use the full physical pixel density for displaying the image - whilst basing its size on the CSS pixels.

Upvotes: 3

Related Questions