J. K. J. K. - 2 months ago 9
HTML Question

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

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

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.