Part 1: (maybe solved, see part 2)
Using meta viewport width=devicewidth locks you to a fixed page width.
I instead want the users' zoom to control font size, but always adjust the pagewidth to
fit in the zoomed viewport width. When you resize a browser window on desktop, it actually
does this (reflows your paragraphs to the changed width).
But default on tablets/mobiles, is that you pan around a fixed page-width.
Background: On mobile/tablets, I want to fit the contents/paragraphs to the user's viewport, so he doesn't have to 'pan around' the view. But I still want zoom to be useful: I just want it to scale the text. The default behaviour, where zooming to increase font size, also forces you to continously 'pan' left and right to read every paragraph, in my belief is useless. Though I now appear to have achieved it by adapting viewport-content-width continously, by my lack of experience I'm not sure if I've 'just achieved a kludge'.
Part 2: I've figured out a sort of solution myself. So.. are there better/more robust ways to do this/cross-platform?
I added this javascript event listener, to just update the viewport width dynamically, on window resize, and set viewport to same width as 'window.innerWidth':
(it assumes you set id 'theviewport' on your meta viewport tag.)
window.addEventListener( "resize", function(e) {
var mv = document.getElementById('theviewport');
mv.setAttribute('content','width='+window.innerWidth);
});
but is this a reasonable way?
Related
Please see http://jsbin.com/okUxAvE/28/
This has a width of 500px. The graph works as intended, with the nodes adjusting their position to stay in view as necessary.
How can I have this width be the arbitrary width of its parent instead of the specific 500px? For example, when viewing on a given device, the width might need to be 300px instead of 500px, but except for the change in width, everything should continue to work as in the example (i.e. no resizing of nodes).
Note that I don't care much about when the user resizes the window, although for orientation change it could be useful; so if anyone knows that it's a bonus, but not my main issue.
UPDATE, for clarification: I need 100% of the parent container, not 500px. I can't just use 100%. I know I could get the width of the parent, stick it into a variable and use that, but I'd like to know if there is a better way.
Upon a quick google search of how to calculate the browser resolution with javascript You get a fair amount of useful links on how to change the width (for example) of an element by calculating the screen width (with screen.width) then from there it is simple math to determine what you want the elements width to be. COOL However, that calculates the screen resolution, not the browsers current resolution if the browser is zoomed in, which is unfortunate. Sure you can set a constant width to a parent div and then the element wont be effected by a zoom at all. BUT is there a way to determine the total resolution of the view port left in a browser AFTER a zoom in or out has occured, rather than just the initial resolution? I cant seem to find anything...
Do you mean something like what that user was looking for?
Find real height of any DOM element when browser zoomed
Try to follow it.
I have a page in which I have a wheel of <div> elements, the entire wheel rotates when you click a button.
I achieve this effect by using CSS transforms, which are absolute in nature. However the wheel is very big, it looks nice on my HD display, but smaller screens get the edges cut off. I can not use % widths like I could with a normal layout, what I need is to scale the entire page down in the same way most browsers zoom functions work.
For myself I know that ctr+mouseWheel will zoom out the page so I can see the entire page, however I can not expect others to do this.
I know I can use -browser-transform: scale(amt); on a wrapper div to get the effect I want, however I can not figure out a way to do it dynamically. If I set the scale to .5 it will be .5, no matter the screen. I want the edges of the wheel to just be a few pixels from the edges of the screen on ANY screen. I know that media queries could be used to help the problem, but they would either leave me with results that are less than ideal, or require too many different queries. There must be a way to modify -browser-transform: scale(amt); programmatically, or some other way to have finite control.
Any thoughts?
Have you tried using media queries in css to target different screens. for example, have a media query in your css file that states that at a width of 320 - 480 pixels, the div containing this wheel is scaled to 50%. Then at 481-768 pixels, the div container is scaled to 75%. and from 769 pixels up, the div is scaled to 100%.
That should help you accomplish the dynamic scaling you want at different screen sizes. If you would like a demo, I'll be glad to make a jsfiddle showing it.
I'm writing a web page with Javascript. I have to somehow work with my DIV layer properties refer to page scaling.
How can I do this? You can find the example at apple page. Try to scale it and look at top menu.
EDIT: I thought scaling meant re-sizing the window. You meant zooming in and out, my bad.
The top menu on the apple site is a fixed with and will not scale with the re-sizing of the browser window. If you wanted to have that feature, you would have to assign a:
div {
width: %; //percentage value you want
min-width: px; //the minimum pixel value you want
}
This way it expands and decreases with the page width, yet maintains a min width for readability
Also, using em as a font-size will help keep the text size dynamic as well.
You will encounter this (or similar) behavior on virtually any site. Havent tested it in any other browsers but here is my answer to the same question concerning firefox.
You should use EM's for all you dimensions, so all you elements will scale (when font-size only scaling is enabled). So you can measure the font-size on elements to know it the text-zoom was modified or not.
There is no way to know if the page was zoomed by the browser or not (as i wrote, only if the text zoom is used)
here is a workaroud: it will only work if the font-size is zoomed
http://jsfiddle.net/gGdAq/4/
Basically if the width in Pixel of the element your interested in, is not the base font size * the width in em the page was zoomed.
Maybe this question helps:
Catch browser's "zoom" event in JavaScript
Good day everyone.
I am working on a Firefox extension, and I want to pop up a tooltip at a certain offset from the mouse cursor. However, the problem comes when this offset is out of the viewport. It gets displayed but the user will have to scroll over there. I hope to enhance this by moving the tooltip pop-up within the current viewport.
However, a problem arises because the only clue I have to where I am in the document is the mouse-position. A partial solution would be to calculate how much to move my tooltip by finding out if the current mouse coordinate + the tooltip width/height and see if it will exceed window.innerHeight or window.innerWidth.
However, I come to realize that if it was a very long document and the user scrolled down a fair bit, the mouse coordinate would have a very large y value. Therefore, I can't rely solely on window.innerHeight to see if I am still within the viewport. Anyone found a way to find out the mouse coordinate of the top left corner in the viewport if the user has scrolled down a lot?
Thank you in advance! =)
More specifically in your case, document.body.scrollTop.
However, that's pretty IE-specific, which defeats the purpose of most FireFox extensions. ;-) There are also some DTD dependencies to boot.
This looks like what you want: Determining browser dimensions and document scroll offsets
I think you are looking for something like the scrollTop property:
scrollTop gets or sets the number of pixels that the content of an element is scrolled upward.
#WAI - Well what you said is correct but precisely you will have to use the following if you are working for firefox extension:
window.content.pageXOffset
OR
window.content.pageYOffset