An issue I have with maps on mobile devices is that sometimes when trying to zoom in the map I zoom in the viewport instead - so that the map and text become larger. This happens mostly with inadvertent double taps when out and about, but sometimes happens with pinch zoom. It means that my controls (at the bottom of the viewport) disappear. It can then be rather tricky to (pinch) zoom out the viewport to get the full view of my app back.
The problem is easily fixed by inserting user-scalable=no in the meta, thus:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
But apparently this is a no-no: http://www.w3.org/TR/mobile-accessibility-mapping/#zoom-magnification section 1.4.4
My app is subscription based, and I think the issue of inadvertent viewport zooming is worse than not allowing subscribers to zoom the viewport. So I've left the "user-scalable=no" for now, but am curious to know if there's a way users can say increase zoom on forms but not on maps.
Thanks in advance
Mini
Simple: don't mix your map with other content. Make your map the full screen when you want to zoom the map and then turn off the map zoom when the map is not the whole screen.
There is no other way, because when you zoom your map, you need to call preventDefault, which also disables the standard pinch to zoom.
Note that the documentation says that it should not, that it must:
Restrictive values for user-scalable and maximum-scale attributes of this meta element should be avoided.
When we have a web application, we do want the control to stay at the bottom when we pinch zoom the viewport, like a standard web browser always have its menu bar visible when we zoom inside the content. Web app controls are not part of the content.
Then, you can have a restriction on the viewport size for the full window, as long as your main content (here the map) is scalable.
This will require that your content will always be in an iframe which has no restriction on its scalability.
Your can (and should?) perfectly consider using a font for your controls which is at less 200% of the initial content text size in order to fulfill WCAG recommendations (or must? Definitely).
Related
I'm trying to understand animation loops in WebGl, along with React.
Basically, does the browser repaint specific elements without repainting the whole screen? Does a a reflow always refresh the whole screen? What exactly is the difference between what happens when you manually refresh the window with a refresh button, verses what reflow or repaint? I know this technology has been around awhile, but I never really dove into it much before.
I'm just trying to to understand how a webGL code animates on a canvas element and how React changes elements on a screen, without the whole screen reloading. I've read about requestAnimationFrame, and about how React bundles and diffs virtual dom changes, reducing the number of requests for rerender, but my question is more about the entire window reloading, verses rerendering individual components only. Im building a site with gatsby/react and babylonjs, and just trying to wrap my head around the underlying concepts. Thanks.
What the browser does is somewhat undefined. You give it HTML elements, it somehow draws them on the screen. How it optimizes that process is undefined, all that's defined is what the results are kind of supposed to be like. I say "kind of" because even a simple element like <p>Hello world</p> will be rendered differently on different browsers and differently on the same browser on different OSes or in the same browser on the same OS but with different OS settings etc..
In general the browser builds a tree of nodes (the elements and their contents) called the DOM. It then walks that tree and builds whatever it needs to apply the CSS and then render those elements. Most browsers would try to cache data at various points in that process so that if something changes on the page they don't have to compute everything from scratch. Example might include they generate a glyph (The pixel for a letter), store those pixels somewhere, next time they need to draw the letter at the same size they can just use the pixels they already generated instead having to rasterize that letter from the font definition.
does the browser repaint specific elements without repainting the whole screen?
That's up to the browser.
Does a a reflow always refresh the whole screen?
That's up to the browser. If the browser has way to figure out it only has to compute a partial reflow of some branch of the tree then it might not have to refresh the whole screen.
What exactly is the difference between what happens when you manually refresh the window with a refresh button, verses what reflow or repaint?
Refreshing a window is like killing a program and re-running it from scratch. All the data has to be reloaded either from the network or from the cache, the text gets parsed into elements, etc..
Reflow is computing where all the elements belong, where words or elements wrap, what size they are.
Repaint is drawing the elements. You can repaint without reflow.
how a webGL code animates on a canvas element
A canvas is just a rectangle of pixels, similar to an <img>. The difference is you can get one of several APIs to affect those pixels ("2d", "webgl", "webgl2", "webgpu", ...)
When you change those pixels the browser knows that <canvas> element needs to be re-drawn. How it re-draws it is up to the browser but at does have to at least follow the rules of the spec so for example a <canvas> like pretty much all elements, has CSS applied (it could have border, a background image/color/pattern, rounded corners, etc....). Elements are composited on top of each other so you might have elements in front of the canvas, you might have elements behind the canvas.
Like I said above, what the browser does to draw the elements is undefined but you can certainly imagine that if it can figure out the only thing that changed is the canvas's content, and there are no elements in front of the canvas, and there is nothing behind the canvas, and the canvas is opaque, then it could, potentially, just re-draw the canvas area only.
That situation is rare though. For example, most three.js examples have text at the top positioned over the canvas (the title of the example). Many also have an FPS meter. Some have a drop down UI. All of that is drawn over the canvas so at a minimum, the new contents of the canvas have to be drawn into the window and then those other elements have to rendered on top of that.
Again, how that, happens is up to the browser. It could use software rendering to draw those elements pixel by pixel, or it's possible it has stored the contents of those elements in textures and draws them as quads on top using the GPU.
how React changes elements on a screen, without the whole screen reloading
I'm not sure what you mean by reloading. React keeps its own "virtual DOM". It then tries to apply the changes in the virtual DOM to the actual browser DOM. If there are no changes needed to some elements those elements will not be affected.
From the POV of the browser, nothing is different. All the browser sees is the DOM. If you make changes to the DOM (using React or anything else), then, once your current event exits, the browser will schedule a task to walk the DOM and re-draw the page (using optimizations to re-compute/re-draw less is up to the browser).
I've really got no clue how to describe the subject in English, so here is more info:
Check my (temporary) website on your phone (no matter what kind one) -> Click
What you'll see is the whole site including the background spread over your screen, instead of focussing on just the container in particular.
My only question is: How do I let the screen focus on the container, instead of the whole site. By other words: Ignore the background and spread the container over your whole screen.
Quick mockup:
What is the best way to achieve it, so it adjusts it to the whole screen of your phone?
Thanks!
Try this:
<meta name="viewport" content="width=device-width">
This will "zoom" your device to a reasonable value. ("reasonable" still depends somewhat on the vendor.)
In your case you can play around with device-width parameter and enter a value which suits you. But better stick with it for the time being.
Starting from this you can create different css styles via media-query and e.g. specify
#media (max-width: 400px)
.my-content-div {
width: 100%;
}
}
to scale your content to 100% on mobile devices.
Making a true responsive design is still a big mess but it can be done. Key is, that you start with something you can at least loosely rely on and then work your way from there.
If you want to make it responsive I think the best solution is by using Media Query instead of adjusting the viewport. Set #container to 100% width and height and set the margin to 0.
I have a responsive website. I already have...
<meta name="viewport" content="width=device-width, initial-scale=1"/>
...in the header. The website doesn't just scale everything down automatically to fit on a smartphone screen. It maintains the proper size of my DIVs (whether they be fixed or percentages) and I design my elements to fit accordingly.
However, on one page, I have an interactive diagram with several elements. These are blocks (with text inside them), and they have to maintain fixed widths. The problem is, these fixed widths are much larger than smartphone screens. It's about 1000px wide.
I can't make this div percentage based. It has to be at least 1000px wide and maintain that size on every device. Obviously, this means that it will not fit on smartphone screens.
What I would like to do is continuing using...
<meta name="viewport" content="width=device-width, initial-scale=1"/>
...for every other element in my website, except this one DIV. I need to scale the entire parent DIV, its child DIVs and the text inside of the child DIVs.
I have tried the CSS "zoom" property. But, it doesn't scale the text properly, and the widths of the child DIVs don't seem to "zoom" equally. They get out of alignment.
How can I conditionally apply that meta viewport tag to everything except this specific, fixed width DIV?
you need to write a css media query where your page breaks to adjust the div and its nested elements
here is a css3 media query template gist you can use https://gist.github.com/marcobarbosa/798569
or better yet, I would use bootstrap's responsive grid http://getbootstrap.com/2.3.2/
Disclaimer: I'm not exactly certain this is what you're looking for and I don't have enough rep to ask for clarification in a comment, so here's a possibility...
<meta name="viewport" content="width=1000" />
...where "1000"px is the fixed width of the div you're looking to contain. By omitting the "initial-scale" attribute, the device should figure out the scaling it needs to apply for itself.
I'm looking for component, that would allow me to show and manipulate single image in a same way as native image browsing in Pictures hub.
I want:
Pinch to zoom image (with top and bottom limits)
Drag to move image around, but I don't want it to get out of bounds of screen. Spongy behavior is optional.
Double tap to toggle between original size and fit-to-screen size.
Does such component exist? Preferably free. If it doesn't, then I need to implement everything myself.
Is it possible to resize a silverlight/flash video player on the fly? I would like to create a video where I can drag the bottom left corner to resize the player (maintaining aspect ratio) or at least eliminate the possibility of doing so I could move on to other methods.
Thanks in advance...
EDIT: // forgot to mention
Sorry forgot to mention, this would also mean that the actual video itself resizing right?
Silverlight: Absolutely. Just set the the Stretch property to Uniform and then alter either the Width or Height as you resize.
Flash: Yes, you can alter the size of a flash object through JavaScript. Using a YUI, jQuery, or a Mootools JavaScript library, this should not be too difficult to prototype.
Here is a posts which explains how to resize flash from within your flash code.
Proportional resizing - here is an example of that as well using jQuery.
I'm not sure if the same is true for Silverlight browser objects, although I'd be surprised if you couldn't do the same.
This is a CSS solution for resizing videos on the fly.
The video can even resize itself according to the user settings if it is styled using EMs. This demo shows how a video resize itself according to the width of the user agent.
Here is an example of the silverlight scaling. This photo retouching and restoration site has a couple of silverlight controls that scale with browser resizing. There is quite a nice photo gallery that shows the photos before and after the retouch.
JWPlayer
As of version 5.3 they added a resize() method to the javascript API which allows you to resize a player - and all the control bar etc. will resize correctly too.
http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12540/javascript-api-reference
resize(width, height) Resizes the
player to the specified dimensions.
width:Number: the new overall width of
the player.
height:Number: the new
overall height of the player. Note: If
a controlbar or playlist is displayed
next to the video, the actual video is
of course smaller than the overall
player.