How to calculate CSS zoom factor in dependence on screen width?
It is primarily about determining a dynamic zoom factor, which changes depending on the resolution [...] No
JavaScript, please, CSS solutions only.
This in itself would be possible, though one statement of your question limits the solutions tremendously: "I don't want to create so many media queries for really big screens.". Unfortunately, without the usage of lots of media queries this won't be solvable.
Let me elaborate on this bold statement. You can't get the screen width and/or height with CSS only (cf. this). The only possibility you have is to use @media
queries - they were invented for exactly this purpose, i.e. your CSS should be displayed in a certain way if width is equal or less than 1200px would be written like that:
@media (max-width: 1200px) {
/* Specific CSS for 0px <= width <= 1200 */
}
If you accepted JavaScript, we obviously would be able to grasp the current width and height via $(window).width()
, respectively $(window).height()
or even the screen width and height via screen.width
and screen.height
(click here for an example). But as you specifically mentioned not to include JS, I'll go more in-depth into a CSS solution:
That out of the way, we now know we can't get the screen dimensions with CSS only, hence we're not able to dynamically solve this due to inability of calculating the "magic X factor". What are we able to do then? Well, as mentioned above @media
queries were specifically designed for such a use case!
@media
is available on nearly all modern browser, see here for the graph:
With @media
we could build a logic similar to this:
@media all and (max-width: 2559px), (min-width: 1920px) {
/* specific CSS for this screen size */
}
@media all and (max-width: 3839px), (min-width: 2560px) {
/* specific CSS for this screen size */
}
Obviously, you could custom fit your @media
queries in a way so your "dynamic" zoom still looks flawless. In my example I took the sizes for a WQHD
and UHD
resolution into consideration, hence the first CSS will be execute if it's 1440p, the second one if it's 4k (here is a list of common monitor/TV resolutions).
Obviously, using too many @media
queries will be a disadvantage - performance-wise and from a maintainability point of view. I'd love to give you a better solution, but going with the strict rules you have enforced upon this question, it's hard to suggest anything aside the function originally developed to achieve such a goal. If you still want to go with CSS-only, may take a look at this GitHub repo - it helps to keep the @media
queries more sorted.
Last but not least, I thought of going into detail regarding the zoom
factor, but it seems like you got that under control (judging by your specific examples - in your case, you'd need to calculate your X value for each @media
query you decide to implement in the end).
Besides the links mentioned above, I suggest the following for further reading purposes:
- A general revision about viewport lengths
- Regarding zoom/scale (especially if you decide to go with JS)
- Documentation about CSS3 Media Queries, very useful!
- Another tutorial about
@media
How to zoom content to screen width
Here's a simpler method: use Javascript to manipulate the CSS scale class:
$(document).ready(function(){
var width = document.getElementById('hijo').offsetWidth; var height = document.getElementById('hijo').offsetHeight; var windowWidth = $(document).outerWidth(); var windowHeight = $(document).outerHeight(); var r = 1; r = Math.min(windowWidth / width, windowHeight / height)
$('#hijo').css({ '-webkit-transform': 'scale(' + r + ')', '-moz-transform': 'scale(' + r + ')', '-ms-transform': 'scale(' + r + ')', '-o-transform': 'scale(' + r + ')', 'transform': 'scale(' + r + ')' });
});
#padre{ overflow-x: visible; white-space: nowrap; }
#hijo{ left: 0; position: fixed; overflow: visible; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; -webkit-transform-origin: top left; transform-origin: top left; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="padre"> <div id="hijo"> THIS CONTENT HAS TO FIT HORIZONTALLY ON SCREEN, THIS CONTENT CAN'T WRAP NOR SCROLL BLA BLA BLA BLA BLA BLA BLA </div> </div>
zoom depending on browser resolution / browser screen size
The better approach to achieve this using responsive design.
Calculate every element in rem unit so that as you change the font-size on root element; all of your element's looks bigger/smaller on screen through desire media quires.
i.e: let suppose you have a div
and h1
elements and you want to show bigger/smaller on different screen then you should follow the code:
<div>
<h1>Hello</h1>
</div>
<style>
div{
height: 25rem;
border:1px solid red;
}
h1{
font-size: 4rem;
}
@media screen and (min-width: 600px) {
html{
font-size: 16px;
}
}
@media screen and (min-width: 1200px) {
html{
font-size: 20px;
}
}
</style>
So in above code the div
and h1
tag should be big or small as you change your font-size on html tag depending upon media query breakpoints.
HTML full page zoom depending on screen resolution
You could scale the content without javascript, just using a mediaquery and a CSS3
transformation applied to the html
element
@media screen and (max-width: 1280px) and (max-height: 720px) {
html {
transform: scale(.5);
// or simply zoom: 50%
}
}
as a side note your code can't work because you're looking for an element with id="html"
, while you're trying to target the html
element (that is document.documentElement
or document.querySelector('html')
)
CSS get height of screen resolution
It is not possible to get the height of the screen from CSS. However, using since CSS3 you can use media queries to control the display of the template as per the resolution.
If you want to code on the basis of height using media queries, you can define style-sheet and call it like this.
<link rel="stylesheet" media="screen and (device-height: 600px)" />
How to Scale My Website Based on Different Screen Width
Whenever I write a html code, I make use of the below line:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
Now let's understand what this means:
initial scale: controls the zoom level when the page is first loaded. This takes the original pixelation on the device screen.
maximum scale: defines how much after the initial scale a user can zoom in.
minimum scale: defines how much after the initial scale a user can zoom out.
User Scalable = 0 means a user cannot zoom-in or zoom out.
By writing the above line as a meta tag we keep everything to: No zoom set, user cannot zoom.
Now we can set the scale to 0.7 as well and accordingly the other 3 values if we want to.
But the standard way to write is as mentioned above.
Media queries would come into picture when after a breaking point (in case of mobile devices) we want the elements to change its orientation and how they would be arranged on the screen (responsive) without changing code structure/design.
Related Topics
How to Add Border Outside The Margin Using CSS
Can You Overlay a Transparent Div on an Image
Three Column Div Layout Dynamics; Left = Fixed, Center = Fluid, Right = Fluid
CSS Filter Invert Rule Breaking Fixed Position on Chrome 68
How Exactly Does Link Rel="Preload" Work
Change Div Order on Responsive Design
How to Keep a Div Always on The Screen, But Not Always in a Fixed Position
Center Image Vertically and Horizontally Inside of Div with Float:Left
How to Put a Vertical Line Down The Center of a Div
Height of Tabcontainers in Dojo
Div Scrollbar - Any Way to Style It
Onmouseout Event Not Triggered When Moving Mouse Fast (Gwt - All Browsers)
Div Not Expanding Even with Content Inside
Is It Ok to Use Multiple Pseudo-Elements in CSS
How to Use Div Class and Id Together in CSS