Marc Hoover Marc Hoover - 1 year ago 60
CSS Question

Mobile CSS rizing window instead of going past width

If I have something like this:

.div {
width: 105vw;

it wont go past the browser window, instead it will just make the browser wider. Does the same thing when i use a media query with max-width of 475px and i set the width to 600px. How do i get it to go past the screen. I am trying to do this:

// Make the div go past the screen on both sides
.div {
position: relative;
width: 105vw;
left: -8px;

And that seems to work on desktop, but not mobile.


<meta name="viewport" content="width=device-width, user-scalable=no">

Answer Source

The issue is that the iPhone browser was zooming out to fit the entire contents of the page by default. The solution was to replace the <meta> tag with one that sets the initial scale, like so:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download