Using JavaScript/JQuery, change relative or viewport sizes to fixed sizes when the page loads

Wishing you a delightful day. As I work on my website, I find myself relying heavily on viewport units like vw and vh for all measurements such as font size, padding, margin, width, and height.

These units provide the flexibility needed to ensure that the page maintains its desired appearance across various screen resolutions, unlike fixed pixel sizes.

I have been contemplating whether it is feasible to retrieve the absolute values of these measurements after the page loads. For instance, converting 1vw to 10px if the screen width is 1000px, and then replacing the relative values in my CSS3 stylesheet with these absolutes. This may sound unconventional, but my goal is to enable users to zoom in and out of the page while having elements scale accordingly. Currently, the page remains static regardless of any zooming except for a repeating image.

I am inclined towards implementing this functionality in JavaScript, considering my familiarity with the language from my background in Java.

Alternatively, I wonder if there exists a feature that disregards relative values during zooming that I am unaware of. If such a solution exists, I would greatly appreciate any insights on the matter.

javascriptjqueryhtmlcssviewport-units

Answer №1

Here's a method that adjusts to the viewport upon page load and reload in Chrome and IE, but does not adapt to subsequent viewport resizes and zooms.

<!DOCTYPE HTML>
<HTML>
<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-1">
<META NAME="viewport" CONTENT="width=device-width, initial-scale=1.0">
... (omitted for brevity)

A script is used to convert viewport units to pixel values by analyzing stylesheets and adding them to a new stylesheet appended after existing ones. By using this approach, you can dynamically update font sizes based on the viewport size.

If only specific styles need converting, they can be placed in a separate sheet or added directly as shown below:

addStyle(document.styleSheets[0], "H1", "font-size: " + w * 0.04 + "px");
addStyle(document.styleSheets[0], "P", "font-size: " + w * 0.02 + "px");

It's important not to set sizes within media queries to avoid layout changes during resizing and zooming.

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

Leverage the power of AJAX for searching in Laravel 5.3

This section contains views code related to form submission: {!! Form::open(['method'=>'GET','url'=>'blog','class'=>'navbar-form navbar-left','role'=>'search']) !! ...

javascriptphpajaxdatabaselaravel-5.3

Having trouble with managing state changes in a React application using Multiple Checkbox components from M

Trying to update the state of multiple checkboxes and then send a POST request. Visually, the checkboxes change, but the form data remains unchanged. Here is the code snippet: export default function AccountInformations(props) { // const { enqueueSnack ...

javascriptreactjsmaterial-ui

Displaying imported JSON data in a tabular format

I am struggling with writing a function in my VueJS template that sends a request to the backend API with a specific key and then displays the JSON response in a table. For example, here is a sample of the JSON data: {"driver_id":1,"driver_name":"{driver ...

javascriptvue.js

Combine the elements of an array to form a cohesive string

As a newcomer to Javascript, I am feeling a bit puzzled about this conversion. var string = ['a','b','c']; into 'a','b','c' ...

javascriptarrays

Utilizing Vue.js to ensure that nested components remain within the parent component even when the store

I have been working on a chat messaging system, where I initially populate the store with root messages and then map the state of that list (array). Everything works fine when posting a new message - the store updates and displays the new post. However, I ...

javascriptvue.jsvuejs2vue-component

What is the best way to share image data between pages in Next.js?

I'm currently developing a project that mimics Instagram (simply because I want to explore Next.js further) and I'm looking for a way to handle image uploads. My goal is to allow users to upload their images and then redirect them to the "create ...

javascriptreactjsnext.js

Deliver feedback from NodeJS Server to JavaScript on the client side

I have set up an HTTP server in NodeJS by utilizing the http.createServer(...) method. In my client-side JavaScript file, I sent a query using the POST method to the localhost URL. The server effectively received the data from the client, but now I am enco ...

javascriptnode.jsxmlhttprequestfetch-api

Discovering the destination URL that an HTML button submits to

While attempting to scrape data from instacart.com, I encountered the requirement of entering a zip code to determine the displayed information. My intention is to utilize Python requests to submit a random zip code. However, I am unsure of which URL to po ...

htmlformsseleniumpython-requests

nap within a for loop and executed in a finally block

I am currently facing a challenge with the following loop: for (const pk of likerpk) { await likeMediaId(ig, pk.trim()); } The problem is that I want to call likeMediaId every X seconds and then, after likeMediaId is done for all items, I want to c ...

javascriptnode.js

Challenges Arising from Dynamic Content in jQuery Booklet by BuiltByWill

I'm currently facing a number of issues. Firstly, this code only seems to be functioning in Firefox. Chrome doesn't display any errors but fails to trigger the alert in the 'after' section. Secondly, my main concern is that while the co ...

jqueryajax

Develop a nodejs script to make a request using a curl or similar method

Can anyone help me figure out how to replicate the functionality of this OpenSSL command using Node.js or curl? The command is: openssl s_client api-prd.koerich.com.br:443 2> / dev / null | openssl x509 -noout -dates. I have been unsuccessful in my at ...

javascriptnode.jscurlopenssl

Having difficulty ensuring DayJs is accessible for all Cypress tests

Currently embarking on a new Cypress project, I find myself dealing with an application heavily focused on calendars, requiring frequent manipulations of dates. I'm facing an issue where I need to make DayJs globally available throughout the entire p ...

javascripttypescriptcypressdayjs

The Model Viewer module is unable to load the three-dimensional model

Attempting to incorporate a 3D model into my website using the modelviewer library, but encountering difficulties in loading the file as shown below: Just to note, I am utilizing github pages with a custom domain from godaddy which may be contributing to ...

javascripthtmlcssgltfmodel-viewer

ajax always returns the same value, even when the input value is different

Each time I click on a different value, the console.log keeps giving me the same value. view image description I have checked the HTML code and found that even though each value attribute is different, it still returns the first value of the attribute. vi ...

javascriptajax

Conceal an element if the angular attribute does not contain any value

Currently, I am facing an issue with an image element in my project. The path for this image is being fetched from an attribute present on my angular object. However, if this imagePath attribute is empty, a broken image is displayed. I want to avoid rend ...

htmltwitter-bootstrapangularjs

Exception: Closing the database connection failed: db.close is not a callable

I have this Node.js application that utilizes MongoDb: const MongoClient = require('mongodb').MongoClient; const demoPerson = { name:'Jane', lastName:'Doe' }; const findKey = { name: 'Jane' }; MongoClient.connect( ...

javascriptnode.jsmongodbtypeerror

Using a JavaScript function, transmit information through an Express response

I am working on sending an application/javascript response from my Express server, utilizing data retrieved from MongoDB. This response is intended for loading content on a third party website. All components of the process have been developed, and now I ...

javascriptnode.jsexpress

The hyperlink within the dropdown menu in HTML code is malfunctioning

I'm currently working on my personal website using HTML and CSS with textedit. I've successfully created functional links for the main navigation menu headings, but I'm encountering issues with the dropdown options. Whenever I try to click o ...

htmlcsshyperlinkdropdown

Implementing a nested ng-repeat for organizing limited data

I'm working with a nested ng-repeat setup like this: <div ng-repeat="item_l in list1"> <div ng-repeat="item_f in list2"> {{item_f}} {{item_l}} </div> </div> Currently, this code is producing around 20 results. ...

javascriptangularjsangularjs-ng-repeat

My website footer is falling short and not reaching the bottom of the page

I've encountered an issue where my footer is not extending all the way down the website, despite trying various solutions. Here's what I attempted: I used the following CSS properties: min-height: 100%; max-height: 100%; I included these prope ...

htmlcsstwitter-bootstrapfooter