Enable compatibility with high resolution screens and enable zoom functionality

My goal is to ensure my website appears consistent on all screen sizes by default, while still allowing users to zoom in and out freely. However, I've encountered challenges with using percentages or vh/vw units, as they don't scale elements properly when zoomed. On the other hand, using px/rem/em units results in varying element sizes based on user's display resolution.

An ideal solution would be a unit of measurement that maintains proportional sizing relative to screen size (similar to vw/vh/percentage), yet also scales appropriately when users zoom. This approach would ensure uniformity across devices by default, while offering customization through zoom functionality.

Unfortunately, CSS does not currently offer such a unit of measurement [3]. It is also challenging to implement in SASS, and browser support for detecting zoom levels in JavaScript is limited [1], [2]. The absence of this technique is perplexing, given its potential to revolutionize web design: providing uniform defaults for all users, while enabling individualized customization.

javascriptcssresponsive-design

Answer №1

I successfully tackled this issue by implementing two media queries along with a sass function. Below is an excerpt from my sass files:

@function vw($px-vw, $base-vw: 1920px) {
  @return ($px-vw / $base-vw) * 100vw;
}

@media screen and (min-width: 0px) {
  .container {
    flex: 0 0 vw(280px);

    margin: vw(40px);
    border-radius: vw(30px);

    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    background-color: #ffffff;
  }

  .logo_container {
    background-color: #ffffff;
    margin: vw(40px) vw(80px) vw(40px) vw(80px);
  }
}

@media screen and (min-width: 1920px) {
  .container {
    flex: 0 0 280px;

    margin: 40px;
    border-radius: 30px;

    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    background-color: #ffffff;
  }

  .logo_container {
    border-radius: 30px;
    background-color: #ffffff;
    margin: 40px 80px 40px 80px;
  }
}

Answer №2

Have you considered the idea of creating customized units in CSS using variables based on the pixel measurements of the browser window upon loading?

For example:

window.onload = function () {
  const w = window.innerWidth;
  const h = window.innerHeight;
  document.body.style.setProperty('--vmin', Math.min(w, h)/100 + 'px');
}
div {
  width: calc(10 * var(--vmin));
  height: calc(10 * var(--vmin));
  background-color: magenta;
}
<div></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to rearrange the selectpicker selection based on the user's choice?

I'm in the process of setting up a selectpicker that allows users to choose multiple options from a dropdown list. The challenge is that the values extracted by my backend need to be in the order of user selection, rather than the original order of th ...

javascriptjquerydataframeflaskbootstrap-selectpicker

Restricting Entry to a NodeJS Express Route

Currently, I am in the process of developing an express project where I have set up routes to supply data to frontend controllers via ajax calls, specifically those that start with /get_data. One issue I am facing is how to secure these routes from unauth ...

javascriptnode.jsajaxexpressroutes

I have my doubts about whether I am implementing the recapcha API correctly in a React application

I implemented the recapcha API in order to prevent bots from submitting posts on a forum site. As a new developer, I'm not sure if this is a real threat or not, as the users are limited to a maximum of 3 posts before they have to pay for more. I' ...

javascriptreactjssecurityrecaptchacontent-security-policy

Trouble with displaying the NVD3 sample chart

I seem to be missing something simple... I've copied the code for an nvd3 example exactly, but I'm getting a blank page without any error messages. Both the nvd3 and d3 libraries are showing up when I check in the console by typing "nv" or "d3", ...

javascripthtmld3.jsnvd3.js

What advantages does incorporating SSR with dynamic imports bring?

How does a dynamic imported component with ssr: true differ from a normal component import? const DynamicButton = dynamic(() => import('./Button').then((mod) => mod.Button), { ssr: true, }); What are the advantages of one method over the ...

javascriptreactjsnext.jsjsx

Warning: Unhandled promise rejection - The type error occurred because the property 'close' of the object is undefined

I am currently configuring node.js in order to test my JavaScript codes using the Jest JavaScript testing framework. Can anyone spot what I might have done incorrectly? package.json file { "name": "institute-jest", "version&quo ...

javascriptnode.jsnpmjestjs

Maintain the div's aspect ratio by adjusting its width according to its height

I am seeking a way to maintain the width of the .center div in relation to its height, following a 4:3 aspect ratio (4 units wide for every 3 units high). The height of the div should be set to 100%, and I also need to align the div horizontally at the cen ...

csshtmlheightwidth

What is the best method for setting up message scheduling for a Microsoft Teams bot based on different time

I am trying to figure out how to send messages to users from my bot at specific time intervals. Currently, I'm using agenda for scheduling messages, but I've run into an issue with the timezone discrepancy - agenda is 5:30 hours behind my timezon ...

javascriptnode.jsbotframeworkmicrosoft-graph-apimicrosoft-teams

Updating ListItemText styles in MUI when active with react-router

I am currently using ListItem from Material-UI. I am attempting to increase its font weight when it is active, but for some reason the font-weight property does not seem to have any effect. Below you will find the code snippet: <List component=&a ...

cssreactjsmaterial-ui

What is the method for styling the third list item in a CSS hierarchy?

I'm struggling to understand the hierarchy in CSS for creating this specific layout. I've searched for explanations, but haven't found a clear one that breaks down how each level works. This is my first time working with CSS so it's bee ...

phphtmlcssmenuhtml-lists

Encountering a SonarQube error message stating "Unnecessary 'undefined' should be removed" when using "undefined" as a function argument

When calling a function, I have been passing "undefined" multiple times as a parameter. However, the SonarQube report is flagging an error stating "Remove this redundant undefined". https://i.stack.imgur.com/YhOZW.png It should be noted that the function ...

javascriptnode.jstypescriptsonarqube

Is there a way to use JavaScript to import several custom fonts at once?

Is there a way to import a long list of custom fonts as icons using Javascript? I have been obtaining the font list from an API, but importing them one by one with pure CSS using @font-face is time-consuming and difficult to maintain. @font-face { fon ...

javascriptcssreactjsfontsfont-face

If you invoke revokeObjectURL, Chrome will fail to display Blob images

-----update------ After some investigation, I found that commenting out window.URL.revokeObjectURL( imgSrc ); fixed the issue in all browsers. It seems like Chrome was revoking the URL too early. I am curious to understand why this behavior occurs, and if ...

javascriptajaximagecgiblob

Use JavaScript to generate an HTML element that has an attribute mirroring its text content

Trying to figure out how to create an HTML element similar to this: <option value="Replaced">by this</option> For example: <option value="ThisIsTest">ThisIsTest</option> UPDATE Using jQuery, I need to achieve something like thi ...

javascriptjqueryhtml

Can the text within the <h3> element be displayed on top of the inline image without the use of <span> tags or background images?

Can the text inside an <h3> tag be displayed over an image without using <span> and images in the background? HTML <h3>sample caption 1<img alt="" src="banner4.jpg" /></h3> CSS h3{ } h3 img { } ...

cssxhtml

Is there a way to convert an empty string to zero in MySQL?

Can you help with answering my question? My question pertains to saving an empty string "" value in my table and storing it as a 0 value in the MySQL database. Here is a visual representation: Table -> MySQL "" 0 Thank you for your assi ...

javascriptphpmysql

How to retrieve the dimensions of an image for a specified CSS class with Selenium or PIL in Python

I am interested in using Python to determine the size of specific images. Is it possible to automate this process so that I can identify only images with certain classes? I am unfamiliar with PIL. Could I define the CSS class/name/id after specifying the U ...

pythonhtmlcssselenium

The HTML div captured with html2canvas is incomplete

I am currently developing a meme editor website utilizing the html2canvas library available at Below is the HTML code for the div I aim to capture: <div class="container"> <div id="theUserMeme"> <div class=& ...

javascripthtmlhtml2canvas

Slice the towering text in half lengthwise

Ensure that the last line of visible text fits within a 20px padding, or else it should be completely cut off. The challenge lies in the varying text lengths of h3 each time. It's difficult to predict how much needs to be trimmed. Currently, the tex ...

htmlcss

Having difficulty assigning a JSON key value to a variable

I am encountering an issue where I keep receiving '[object HTMLParagraphElement]' instead of the ID value that I expected. The desired output should resemble this: I attempted to store the console.log output in a variable, but my attempts were ...

javascriptjqueryjson