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
Related
Right now i am making all of my elements with a percent width and height so that they can scale the same regardless of the device. As an example, whether someone is viewing an input element on a 720p or 4k monitor, it should fit the same across the browser.
Now my problem is that i am trying to make my elements scale upon an increase or decrease in zoom(browser zoom:ctrl and +/-) but because i am using a percentage width and height, the element doesn't scale. Well actually i think when i zoom in the input gets smaller, i'm not sure why that is. Other websites when you zoom in their input gets bigger in width and height. When you zoom out the element gets smaller.
What is the proper way to go about doing this? Obviously it can be done since every site i visit, including stackoverflows elements(search input as an example) looks the same size upon viewing and scales in height and width upon zooming.
What i've tried:
Using a fixed min-width and min-height but it's not exactly what i want. If the width/height percentage is higher than the fixed min-width/height then the element wont resize until the zoom % * the fixed min-width/height pixel count is greater. If the fixed min-width/height pixel count is higher than the width/height % set on the element, then the element will be the size of the fixed min-width/height and the element size wont look the same across all monitors.
using a fixed pixel for the width/height will make the element resize upon zooming but it wont look the same across all monitors.
Using a flexbox on the parent div "search" to make the child input "test" grow/shrink upon zooming. Doesn't seem to do anything.
NOTICE: don't try to zoom in without full viewing the code, otherwise it will make the input scale upon zooming as a result of stackoverflow's own code.
html, body {
width: 100%;
height: 100%;
margin:0px;
}
div#maincontainer {
height: 100%;
width:100%;
background-color: orange;
}
div#search {
position: relative;
top: 50%;
margin:auto;
height: 5%;
width: 35%;
}
input#test {
position: relative;
width: 100%;
height: 100%;
}
<div id="maincontainer">
<div id="search">
<input id="test" type="text" placeholder="TESTING" />
</div>
</div>
The browser zooming (using "Ctrl and +/-") actually changes the value that font-size: 100%; (which is equivalent to font-size: 1em;) corresponds to. That is why the text inside your input element is scaled when using this zooming feature. But because the input element size does not change (see explanation below), it looks like the latter gets smaller... whereas in fact it is its inner text that becomes bigger.
As far as I understand, the idea was to give a chance to the visitor to read text (while possibly breaking the page layout), if for some reason they have difficulties with the text size the website designer had chosen.
In the case of the size of your input element, because you define it relatively to the size of its containers (using percentages), up to the body which has 100% of the view port, you are not giving it any chance to be scaled by this feature, but instead you make it dependent on the view port size. So if you do resize your view port (i.e. browser window), you will see your element size changing, but not its inner text. It may sound as what you were looking for at the beginning (rendering with the exact same proportions on different devices, actually on different view port sizes), but what today's websites do is actually a totally different technique.
What they do is called "Responsive Design", i.e. the CSS uses "media queries" that can detect the type of device, screen size (actually view port size), etc. These media queries act as conditional blocks for CSS rules. The typical use case is to render a big menu on a side when the screen is wide enough, but only a menu button when the screen is narrow.
You can also notice that they do not actually render in the exact same proportions depending on the view port size (which was what you wanted to do by using only percentage-based sizes). Most of the time, there is an empty space (on both sides in the case of StackOverflow) that fills the gap, while the content has the same size in pixels, until the view port size changes so much that it triggers a media query, which then applies a different set of CSS rules, possibly changing completely the page layout.
Another good practice is to use as much as possible sizes (but not necessarily positioning) in em units, which refer to the current font size. That way, when the visitor uses the browser zooming feature, these sizes will scale accordingly, not only the text. For your case, you could have defined the height of your input element as 1.5em for example, so that it is always 50% bigger than its inner text.
Finally, I encourage you to use the DOM and Style inspectors of Development Tools featured by most browsers (turn the Development Tools on by hitting F12). They usually also provide element pickers, which allow you to pinpoint an element on the page for which you want to see the exact DOM and applied styling rules. It is a very instructive and ludic way to learn how others design their websites.
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?
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 am building a website for my tennis club: http://users.aber.ac.uk/dwd/aut/
Can anyone tell me why it looks zoomed in and push to the right? Click view source to see the HTML/CSS/Javascript as its quite a lot to post in the comment thread.
If you zoom out once that's what the site SHOULD look like.
Any ideas guys?
Dan
You've set the content to have an above average width and absolutely positioned it some distance from the left of the page.
It looks lopsided because it's not properly centre-aligned (if you use the Ctrl+- shortcut it becomes more obvious)
If you remove position: absolute; from #wrapper it displays correctly centred for me (in Chrome)
Remove the font-size from the body CSS, and then remove position: absolute and left: 12em from your #wrapper div.
Others have pointed out why this is happening. Here's some more points, though:
to truly centre a container, use a value of auto on the margin X/Y axes. You are doing this currently, but it's being undermined by the fact that you have also specified absolute positioning, so remove the latter
incidentally, your current attempt to centre may work on your screen, but on a different resolution it will not, since you're essentially just bumping the page to the right by an arbitrary number of pixels
whilst a target resolution is something every site designer has to decide for him/herself, the standard is to make the page work in 1024 * 768. Your page container is currently 1024 pixels in width along, with a further 32px padding added either side. Either reduce your width or take advantage of the CSS property box-sizing, which means any specified padding eats into your element's width, rather than adding to it
I am currently working on a webpage and I have achieved fitting it in the whole browser window by using percentage(%) values in the width and height properties of my css. The problem now is that when I resize the window, everything gets scrambled and distorted (e.g labels,links, etc.) Is there a way to have a minimum height and width so as when the window is resized, there is a limit those properties to prevent the layout being distorted?
Thanks is advance!
You actually answered the question yourself. You can use the CSS properties min-width and min-height to set minimum width and height, respectively, for a block level element like a container.
A better solution would be to use responsive design, though, which will continually adjust itself as the window grows and shrinks.
Check out the css properties min-height:
http://reference.sitepoint.com/css/min-height
and min-width:
http://reference.sitepoint.com/css/min-width
You may also look into a simple css framework like StackLayout:
http://stacklayout.com/