CODEWITHSUNDEEP
jqueryhtmlcssresponsive-design
buckdanny
buckdanny

Reputation: 357

Image 100%/100% how to disable zoom on mobile device

I need to have an image to be 100% width and 100% height and position fixed. Everything works fine but i have some problems on mobile device. For Example on Iphone, when I use the zoom the image zooms and a moment later it skips back to 100%/100%. How can I avoid this and lets say disable zooming for a special div? Or is it better to work with jquery to make the shape-div same size as viewport? Or…?

.shape{

width: 100%;
height: 100%;

z-index: 2; //there are elements under this shape
position:fixed; 

left: 0;
right: 0;
top: 0;
bottom: 0;

background-image: url("shape.png");
background-repeat: no-repeat;
background-size: cover;

background-origin: content-box;
background-position:center;
}

A next problem is: when Safari displayed the navigation bar the Shape changed its size (that makes sense) but how can I avoid this?

Thank you so much in advanced!

Upvotes: 0

Views: 1652

Answers (2)

feeela
feeela

Reputation: 29932

You can't disable the zoom for a single element.

You may do so for the whole document (via the viewport meta tag), but that would probably leave some user with an unusable site (as the images and text may be too small…).

Upvotes: 1

Gary Storey
Gary Storey

Reputation: 1814

Not sure if this is what you want but you can disable the zoom feature entirely with this:

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

Upvotes: 1

Related Questions