I found a solution to scaling my web page down here. However, I noticed that this solution messes with jqplot's highlighter and zoom functions. Is there a solution that doesn't interfere with these functions?
The only way I can think of with out seeing your code, and without using the solutions provided by the other question, is to add separate size percentages to each element on the page. For example, adding font-size: 30%; will decrease the font size of all text in the element, so you could put this into the body styling’s. I don’t think there is a way to change all div's by a persent of their current size, without using zoom functions in css (I presume you have considered these as they are in the answer for the question you linked) but there is probably a way to do this in JS, by collecting the dimensions and timesing by an amount. You can just change individual sizes for each div though.
Hope this helps :)
Unfortunately, scaling and zooming is part of the function of the browser. This is necessary for screen readers and people with eyesight issues to zoom in.
When you try to take control with zoom, you will always be playing with compatibility and browser issues.
A suggestion? It sounds like your requirements are bogus in light of current internet-enabled mobile devices. A liquid layout is the current best practices for a reason.
EDIT: Have a look at http://alistapart.com/article/responsive-web-design
Related
I have discovered chart.JS for a while and I wanted to implement it in my website. I wrote the simplest code available on their webpage and the tooltips do appear indeed, but when I use the zoom property on the html tag in my CSS (cause I want to make the whole page smaller) , the tooltips seem to go crazy. Some of them do not appear anymore and others appear only when hovering certain areas of the chart. Is there any fix to this ?
The CSS zoom property is not advised for this use. It is mostly for image zoom, and has very bad support in different browsers. I would advise making content smaller by setting widths of containers, and reducing font sizes.
There is no telling how css zoom will affect the canvas used by ChartJS in different browsers.
ref: https://developer.mozilla.org/en-US/docs/Web/CSS/zoom
How to make a website get treated like in image when window resizing? I don't know if this could be done with the viewport or not. I have looked at some answers and most of them say that it not possible or not a standard. Yet on this very site you can see when zooming in that elements do not get resized or at least the element to window size ratio is always the same. but when you go to a website like https://www.lynda.com/ you can see the elements resizing when zooming in and there is never a scrollbar for the width unlike stackoverflow. So how can someone site's be like stackoverflow in that regard? because lynda.com way seems to be the default.
Thanks in advance ....
If I got it correctly, you are interested in these concepts:
Fixed layout/design: SO like layout, elements do not react if viewport is changes
Response layout/design: Lynda like layout, elements change or even disappear, if viewport becomes small enough
A nice, short and illustrative presentation can be found here, where you can also find out about other design modes.
I am using a jQuery plugin for slider and want the slider images to remain unchanged if we change browser's dimensions. The website below is the inspiration for the effects.
www.beoplay.com
There is no surefire way of doing this. The only suggestions that I could make will require extensive programming knowledge in javascript and even then, there is no guarantee this will work. Unless it breaks the page, I don't think you need to worry about this.
Moreover you might just kill the user's experience by trying to prevent him from rescaling
You can check this question for some solutions that might and I say this with a packet of salt might help
Catch browser's "zoom" event in JavaScript
If you want to fix or freeze images, just give %age value of those image in pixels. This will keep it fixed irrespective of zoom in or zoom out.
You can use This tool to convert your pixels into percentage.
Hope I hope this helps.
EDIT : Alternative solution
I suggest you to use Media Queries.
It will enable you to make the images to stay intact depending on the responsiveness.
You should apply media queries relevant to the images in issue.
I hope this helps.
In Chrome/webkit based browsers you can try zoom: reset; CSS rule
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW15
You can also try adding viewport relative units to your elements. https://caniuse.com/#feat=viewport-units
if you want to keep the size of images fixed u can simply use css to keep width and height fixed ,also you can set the position as fixed which will help you to to keep the image from movement.
hope it helped
I recently took up web programming, and this issue plagues my site. I set all the font sizes using px values in css and aligned everything using divs, absolute positioning, and more px values. It looks fine until I try zooming in and out, at which point the text size and page size decrease at different rates, resulting in comparitively huge text when zoomed all the way out. This also renders viewing the site on a mobile device completely impossible. I've read that font sizes should be specified with ems not pxs, but that didn't fix it.
What is going on?
It's an easy problem to get into, particularly for a beginner. Consider moving divs to percentage values etc. In terms of mobile viewing and standard desktop browsing, I would suggest you try using a grid system.
One popular example which is very easy to use & I think is great for beginners is 960.gs
I'm afraid without code snippets and your question being very generalised, its unlikely we can help.
There are also ready to go grid systems that shift the page around depending on screen size but I wouldn't recommend them until you are comfortable using 960.gs
I would also try http://twitter.github.io/bootstrap/, it makes it very easy to create a nice looking site. As redditor mentions, using pixels can result in weird behaviors when zooming especially for positioning elements. I would try to use something like bootstrap or 960, or one of the other grid systems.
using the new vmin css property to get the right font size. works absolutely great!
div.sample { font-size: 1.5vmin; text-align: center; ... }
the problem occurs when the page is resized. for example, if the page is made smaller, the font-size is unchanged, making everything out of kilter.
first, is the browser supposed to handle this?
second, what's the best way to handle it? it seems that if I use a trigger to set the font-size, then I would need to know the font-size values in javascript as well as the css, creating a situation bound to fail.
It looks like vmin is behaving in Firefox.
Here's a jsfiddle I made for testing:
http://jsfiddle.net/noahcollins/Sc8gm/
It sounds like you're seeing the issue in chrome? As Bazzz pointed out, there's a Chrome bug that's still open. I was able to replicate it in Canary. The CSS Tricks article can help you get around it with some javascript if you're so inclined.
Another thing to keep in mind: support for vmin in mobile browsers is very limited at this time, so it will be an issue in the case when users rotate between portrait & landscape.
Supposedly that's a known bug, as stated by CSS-Tricks. They also have a javascript workaround, have a look here under the head "Bugs!":
http://css-tricks.com/viewport-sized-typography/
suggested workaround by CSS-Tricks
To fix this issue (allow resizing without page refresh) you need to
cause a "repaint" on the element. I used jQuery and just fiddled with
each elements (irrelevant, in this case) z-index value, which triggers
the repaint.
causeRepaintsOn = $("h1, h2, h3, p");
$(window).resize(function() {
causeRepaintsOn.css("z-index", 1);
});
vmin is a nice idea for mobile web design, but browser support is limited. Furthermore, the browser support that does exist exhibits some strange behaviors. For instance, because vmin calculates the font size as a function of the current size of the screen, when you focus on a text input element you are going to have trouble because sometimes the text will resize based on the much smaller window you have with the keyboard open. So at times your text input will spontaneously become tiny, which is incredibly annoying. I therefore recommend using vw, to maintain text size based on the width of the screen. It lends itself to a better user experience. vh has the same issue I talked about above.