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.
Related
I'm trying to figure out how can i set position be same value whether it renders first time on laptop or 1920x1080 monitor.
I'm using this as example - https://agentcooper.github.io/react-pdf-highlighter/# and as you can see inside text layer every div has same position whether it loads on laptop or on 1920x1080 monitor.
For example at this link just focus on one div and render it both on smaller screen and larger screen and you will see what i'm trying to achieve, both times they have same position values.
If you want to check live example - https://stackblitz.com/edit/ng2-pdf-viewer -- at this live example position value changes on each resolution.
I want to achieve this but so far i tried :
Every kind of option from ng2-pdf-viewer library and none of them can help me achieve that for every load
fixed width for container wrapping pdf layer but that has no logic as when it renders again on 1920 it has different positions
Try using viewport units vw or vh instead.
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?
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
I am trying to determine the actual viewPORT size of the current browser window. I've tried:
window.innerHeight/innerWidth
document.documentElement.clientHeight/clientWidth
document.body.clientHeight/clientWidth
All return the full page size and NOT the viewing area.
What I'm trying to ultimately achieve is forcing a popup menu to appear on screen (in the viewport). Right now when it is shown, it might show below the scroll and the users are not happy with that. I know the x,y of where they've clicked. I just need to compare that to the size of the viewing area (with the size of the popup) to see if it will go offscreen.
It should be noted that the page is showing in an IFRAME, so if I need to go up one level to get the correct value, I can do that.
window.innerHeight/innerWidth
That unequivocally does give you viewport size (in this case, the size inside your iframe), but it isn't available on IE.
document.documentElement.clientHeight/clientWidth
That gives you viewport size, when the browser is in Standards mode. Typically used as fallback for IE.
document.body.clientHeight/clientWidth
That gives you viewport height in Quirks mode. You don't want to be in Quirks mode. Check the <!DOCTYPE of your document.
I just need to compare that to the size of the viewing area
Then you'll also have to look at the document.documentElement.scrollTop/scrollLeft.
Try
document.getElementById("").offsetWidth
Fill the above code with different element ID's, try using the body tag, or a wrapper div.
Apparently by going to the parent document, I was able to get the correct value.
Thanks!