Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Prevent that a fixed element resizes when zooming on touchscreen

Tags:

css

touch

On an HTML website, you have a fixed element like this:

<div id="fixed">   <p>Some content</p> </div> 

It has this CSS:

#fixed { height:150px; position:fixed; top:0; left:0; z-index:10000; } 

When you view this page on a mobile device (or any touchscreen-enabled device), and you pinch the screen to zoom in, the fixed element zooms in along with all the other content (it gets bigger). When you zoom in far enough, it becomes so big that it almost fully overlaps all the content beneath it.

A practical use case would be a UI like a fixed navigation bar across the top, or a floating button in the corner of the screen.

How could you prevent a single element from resizing in the browser, and make it stay the same size at all times?

like image 527
bobsoap Avatar asked Mar 05 '13 20:03

bobsoap


People also ask

How do I stop a CSS layout from distorting when zooming out?

To fix the problem with zooming in, try adding the min-width attribute to your outer countainer ( #container or #navbar ?). Setting min-width prevents the webpage from trying to shrink down beyond the specified width (i.e. 300px).

What is* zoom in css?

The zoom property in CSS allows you to scale your content. It is non-standard, and was originally implemented only in Internet Explorer. Although several other browsers now support zoom, it isn't recommended for production sites. .zoom { zoom: 150%; }

How do I zoom the same element size?

min-width: 100%; This will freeze the width, you can do the same for height too.

How does the fixed element zoom in and out?

When you view this page on a mobile device (or any touchscreen-enabled device), and you pinch the screen to zoom in, the fixed element zooms in along with all the other content (it gets bigger). When you zoom in far enough, it becomes so big that it almost fully overlaps all the content beneath it.

How do I prevent a text field from being resized?

To prevent a text field from being resized you can use the resize CSS property with its "none" value. Add this simple piece of code to your textarea style: After it you can use the height and width properties to define a fixed height and width to your textarea element.

Is it possible to change from fixed to absolute on Zoom?

Ali Bassam's answer is bullsh. This effect is predominately used in responsive mobile web ads, and mobile UI kits with fixed header footer elements. ad example: adform.com/BannerTags/Views/Test/Test.aspx?key=MTI5MTI5MQ== Switching from fixed to absolute on zoom is the way the go.

How do i Zoom in on an HTML page?

On an HTML website, you have a fixed element like this: It has this CSS: When you view this page on a mobile device (or any touchscreen-enabled device), and you pinch the screen to zoom in, the fixed element zooms in along with all the other content (it gets bigger).


2 Answers

Demo to this answer
Dialog widget library I wrote based on this answer.
Demo for the dialog widget Try it on mobile, zoom around and tap the link.

While the gesture event seems to hold some metadata about the scale factor of something, we might be better off in control and find it manually. Since we want to keep the effect up while the user moves around live, we need to recalculate during every scroll event.

window.addEventListener('scroll', function(e){ /* coming next */ }) 

We calculate the zoom factor and apply it to the rescaled element as a CSS3 transform:

el.style["transform"] = "scale(" + window.innerWidth/document.documentElement.clientWidth + ")"; 

This will rescale the element back to zoom 1 ratio relative to the current viewport zoom, but it's likely it is still incorrectly placed on the page. This means we have to get new values for it's position. What will actually happen on screen is dependant on the element's CSS position value, fixed will behave differently than absolute and on mobile Safari specifically, fixed position has an added smoothed out effect while the page is zoomed, which creates some inconvenient problems for this cause - I would suggest having a 100% content height element as a relative parent for your intended scaled element, then in your script, position your element absolutely inside of the parent. The following values work for this example demo:

overlay.style.left = window.pageXOffset + 'px'; overlay.style.bottom = document.documentElement.clientHeight - (window.pageYOffset + window.innerHeight) + 'px'; 

You might also pay attention to using transform-origin CSS property depending on from which anchor point you want the scaling to take effect - this has a direct effect on alignment.

like image 79
mystrdat Avatar answered Sep 28 '22 16:09

mystrdat


I'm looking to do the same thing that @bobsoap was trying to do BUT My solution is the following:

1. Disable zooming in your viewport tag:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" /> 

2. Use a plugin like: TouchSwipe.js:

https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

And only zoom in the Div or divs that you want & suit to your needs.

I have 2 divs on a page (left & right) The left div has a fixed scrolling menu and the right has small text & images. I want to pinch/zoom and have only the right div zoom so that the user can read the text better if necessary. Rather than make the entire viewport zoomable and disable zoom on my left div, I'm doing exactly the opposite: Make only my right div zoomable via TouchSwipe plugin.

I'll share my code when I'm done if anyone is interested in how I implemented the TouchSwipe plugin.

like image 20
Max Knox Avatar answered Sep 28 '22 16:09

Max Knox