My application looks better when browser zoomed to 75% in IE 9.
When resolution is 1024x768 .
Can i make the IE 9 browser to zoom to 75%.
I tried with media queries.
#media (min-width : 980px) and (max-width: 1199px) {
.zoo {
transform: scale(0.75);
-webkit-transform: scale(0.75);
-webkit-transform-origin: 0 0;
-moz-transform: scale(0.75);
-moz-transform-origin: 0 0;
-o-transform: scale(0.75);
-o-transform-origin: 0 0;
-ms-transform: scale(0.75);
-ms-transform-origin: 0 0;
}
}
Added this css class to body.But it dosen't work
So you want to apply manual browser zooming using CSS and/or JS?
This is really not possible with CSS and/or JQuery. Manual browser
zoom and CSS zoom property both work differently and will produce
different results.
Alternative: On page load provide users with a modal window
instructing them how to manually Zoom in/out, close it after they have
zoomed successfully.
Source:
https://stackoverflow.com/a/30152402/2534513
Changing the browser zoom level
Related
I have a scroll jacking on a video that scales the video container using css transform. It's working fine on all browsers however in IE and edge it does the scale transform but the video gets pixelated when the video is scaling up.
CSS
transform: translateY(0) scale(3,3);
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
Try this
-webkit-transform: translateY(0) scale(3,3);; /* android, safari, chrome */
-moz-transform: translateY(0) scale(3,3);; /* old firefox */
-o-transform: translateY(0) scale(3,3);; /* old opera */
-ms-transform: translateY(0) scale(3,3);; /* old IE */
transform: translateY(0) scale(3,3);; /*standard */
I suggest you to refer links below may give you some more information.
transform property
CSS Demo: transform
If still not work then I suggest you to provide your full sample code.
We will try to make a test with it and try to find a solution for it.
I'm aiming to apply custom animation speeds to the Foundation 6 drilldown menu in Foundation 6 For Sites. I know that in _settings.scss, you a can alter the initial click animation through $drilldown-transition, however the animation parameters are ignored when going back a level in the drilldown.
I've checked dist > assets > css > app.css to see if some other parameter or some kind of hidden bit of CSS was controlling this, but it's evident to me that it's handled via JS beyond just adding / removing classes.
TLDR; I'm looking for insight on how to control the animation speed / style of the drilldown menu when going back a level vs going forward a level.
EXP: https://media.giphy.com/media/X8M8Hax10K9SslPN1v/giphy.gif
The close-speed was due to the following lines, viewable in dist > assets > css > app.css
.drilldown .is-drilldown-submenu.is-active {
z-index: 1;
display: block;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.drilldown .is-drilldown-submenu.is-closing {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
The shift from -100% to 100% is too extreme to really get the smooth feel you'd expect. Reducing 100% to 5% resolved the issue.
.mobile_nav > .grid-x > .cell > .is-drilldown .drilldown .is-drilldown-submenu.is-closing {
-webkit-transform: translateX(5%);
-ms-transform: translateX(5%);
transform: translateX(5%);
}
I need to zoom in with Javascript(jQuery),
For example, Ctrl + scrolling mouse.
I tried
document.body.style.zoom
but, it's not working in Firefox.
I don't know what kind of zoom do you exactly want to achieve, but maybe you should try to use transform: scale(X); with transform-origin: 0 0; and max-width set to a proportional value i.e.:
body {
max-width: 50%;
transform: scale(2);
transform-origin: 0 0;
}
My website relies on the user having their browser zoomed in to a specific level, but I've received comments that my site is unusable because their default zoom level is very high (mostly IE users).
How can I force a specific zoom level so that every end user will see the exact same thing?
Simulate Zooming (doesn't change the browser's zoom level)
transform: scale(2);
-webkit-transform: scale(2);
-webkit-transform-origin: 0 0;
-moz-transform: scale(2);
-moz-transform-origin: 0 0;
-o-transform: scale(2);
-o-transform-origin: 0 0;
-ms-transform: scale(2);
-ms-transform-origin: 0 0;
Source: http://cat-in-136.blogspot.com/2010/09/unofficial-css-property-zoom.html
IE 7 and 8
zoom: 2;
These two styles may conflict, so I would suggest using a conditional comment for IE 7 and 8.
http://www.quirksmode.org/css/condcom.html
Source: How to Increase browser zoom level on page load?
I know you're thinking that this is a strange request, however I am currently dealing with a client that gave me a template and decided he wanted it 70% smaller after seeing it in a browser and all the HTML done (!!!!). Thus throwing all the work that was done for both of us out the window. If I could adjust the scale to 0.7 (70%) that would be perfect and the project can still roll out the way it was going. Thank you!
body {
zoom: 0.7;
transform: scale(0.7);
transform-origin:0 0;
-ms-transform: scale(0.7);
-ms-transform-origin:0 0;
-moz-transform: scale(0.7);
-moz-transform-origin: 0 0;
-o-transform: scale(0.7);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.7);
-webkit-transform-origin: 0 0;
}
You might be able to use the CSS Zoom property but negativly? - supported in IE 5.5+, Opera, and Safari 4, and Chrome (verifed, please check before downvoting).
Firefox is the only major browser that does not support Zoom (Check here) but you could use the "proprietary" -moz-transform property in Firefox 3.5.
So you could use:
div.zoomed { zoom: 70%; -moz-transform: scale(.7); }