Using viewport width=device-width, initial-scale=1, maximum-scale=1 doesnt fit my page to my phone screen

Question

I have this but when I open the webpage on my phone it is wider than the screen.

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

so I have to pinch in to make it fit. Might this be caused by the fact that there are some images used as the background of the html page? For instance, further below I have the following:

<img src="index_files/img2.png" width="970">

I don't know much about HTML so I will not be able to understand complex answers.

I also saw some div elements with absolute dimensions like this:

<div class="container">
    <div class="row">
        <div class="sm-12">
            <div class="blue-bg">
                <h3 style="color: #F37620; font-weight: bold; font-size: 22px; background: #34495D; width: 400px; text-align: center; padding: 10px;margin-bottom: 0;  margin-left: 56.6%; text-transform: uppercase;" "=""> requirements specification </h3>

                <img src="index_files/img2.png" width="970">

                <div class="row">
                    <div class="sm-6">
                        <h6 style="font-weight: bold;

As you can see it has a width: 400px and there's a lot of this going on in this html file

Answer 1

Couple things:

Your meta viewport tag is simply setting the scale at which the viewport is set to. It has nothing to do with your images.

Your image is not a background image in the technical sense. A background image is a css property of an element.

You have a fixed width on your img of 970px. That is why it's wider than your viewport.

A quick fix is:

Change:

<img src="index_files/img2.png" width="970">

to:

<img src="index_files/img2.png" style="width: 100%"/>

This will set your img width to 100% of it's containing element. So as long as that containing element is fluid, you're good to go.

Unless you want that image to be 970px and have the ability to scroll it to see the hidden portions on small screens, then you need to start playing with overflow css properties.

Answer 2

That's because the meta tag doesn't make it fit, but simply tells the browser to display the page at a scale of 1 (or 100% of it's original size) rather than trying to shrink it down to fit. To make the page fit you will need to ensure the content is smaller than the width of the device, or that the styles allow for it to respond to the width of the device. I'd suggest looking up some resources on responsive design as this is a pretty large area to try and cover here.