How can I make Zoom in mobile be as it's on PC

See my example page here:

http://fireman-suppression-84203.bitballoon.com

Try to zoom-in this page on a PC (a desktop computer) and try to zoom-in (with your fingers) on you smartphone, can you see the difference? When zooming on a PC browser (Chrome for example) when the text become bigger it's stays on the left/right limits of the screen, but when you try to zoom-in on an iPhone for example, then the text exceeds very fast the left & right borders, and you need to go left and right to read it all.

How can I make the zooming on a smartphone (iPhone 7 in my case) be the same as zooming on a PC? I want that the only scrolling needed will be up and down, I don't want that the page content (text, pictures...) will overflow to the sides (and No, I don't want to disable the zooming option on mobiles).

Here is the code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

div {
    width:85%;
    margin: auto;
    border: 3px solid #73AD21;
}
</style>
</head>
<body>

<div>Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... </div>
<br>

</body>
</html>

I also tried this:

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'/>

and this:

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

But it didn't help.

By the way -

Sometimes I see the 'viewport' meta line written like this:

<meta ...>

and sometimes it's written like that:

<meta .../>

What is the difference between these two? Are the two options legal?

Thanks!

I too use the same meta information you noted

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

The issue you are having is that we are trying to squeeze a page up to 1200px at times into a small mobile browser window. Using the old method of setting the viewport to a specific dimensions such as

 <meta name="viewport" content="width=320" />

The meta tag worked okay but it has limitations, and since it’s non-standard, it’s been implemented different ways across browsers.

There is a better way and I have added the links for you to be able to research the issue a bit more. Basically you should use @viewport CSS styling to solve your issue.

ELEGANTLY RESIZE YOUR PAGE WITH THE @-VIEWPORT CSS DECLARATION

A tale of two viewports — part two

To answer your second question, the way you add the meta tag regarding the closing slash is dependent on the type of page its going on. For instance a XHTML page you may see the closing slash where as a HTML5 page you will most likely see no closing slash. It all comes down to semantic code and web standards set by w3c.

Hope I was able to point you in the right direction.