Disable Zoom on a Div, But Allow Zoom on the Page (An Alternate Div)

Disable zoom on a div, but allow zoom on the page (an alternate div)

You can't do that without clever hacks.

However, you can (and should) use the following CSS to fix zoom issues on mobile devices:

header {
    position: fixed;
    ...
}

@media only screen and (max-width: 720px) {
    header {
        position: absolute;
    }
}

This code enables position: absolute when display width is less or equal 720px, and header becomes the part of the page, rather than being fixed on top.

Prevent background image from zooming in

set top and left value for the element and add a position:absolute. also set the width and height.

.owl-slide {

  background-image: url('http://www.freepngimg.com/download/nature/1-2-nature-png-picture.png');

  background-repeat: no-repeat;

  background-position: center;

  background-size: cover;

  position: absolute;

  top:0px;

  left:0px;

  width: 100%;

  height: 100%;

}

<div class="owl-slide">Sample div</div>

Keeping text size the same on zooming

You actually can get around zooming by using viewport units. Here's the fiddle: http://jsfiddle.net/TnY3L/. Also, I did my personal website using viewport units and no zooming works on it when you use Ctrl + or Ctrl - keys (see http://www.functionalcss.com/). Older browsers do not support vw, vh, vmin, vmax. I got around it by using a polyfill: http://html5polyfill.com/

HTML:

<div id = "header">This is a header</div>

CSS:

#header {
    background-color: #ccc;
    height: 10vh;
    line-height: 10vh;
    font-size: 5vh;
    text-align: center;
}

iPhone safari do not scale (zoom) portion of content

This can be done by using the -webkit-transform: scale in css and detecting the dom width and adjusting the scale number.

   <style type="text/css"> 
        iframe
        {        
            -webkit-transform: scale(1.5);
        }
    </style>

Zooming out / In only visible area of website

You mean this effect? Check DEMO http://jsfiddle.net/bJnCV/

HTML

<div id="home">
    <h1>Site Name</h1>
    <p>This is slogan</p>
</div>

JQUERY

$(document).ready(function(){
    $('#home').css({'width':$(window).width(),'height':$(window).height()});    
});
$(window).resize(function() {
    $('#home').css({'width':$(window).width(),'height':$(window).height()});
});

---

Related Topics