Prevent zooming on the entire webpage except for the images

I'm in the process of developing a basic PWA and am aiming to give it the appearance of a native mobile application, but I'm encountering obstacles with pinch-in functionality.

In my layout.html file (utilizing Flask for the backend), I've included the following code:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

While this setup achieves the desired effect, there are certain images that I'd like users to be able to zoom into. I understand that disabling scalable zoom for the entire mobile page is not recommended, but this is the specific outcome I'm seeking. Is there a CSS/JS solution or alternative method that doesn't involve npm, something as simple as utilizing a CDN would suffice for me.

javascripthtmlcss

Answer №1

Adjust the height and/or width of non-image elements using vh or vw units.

vh - viewport height: represents a portion of the screen's height. Even when zooming in, elements like fonts maintain their size.

div {
   font-size: 2vh;
}

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

Intelligent application banner

As I work on integrating a smart app banner into my company's website, I've run into some limitations that are proving to be quite difficult. Firstly, the banner always displays at the top of the page, with no option to adjust its position. Addit ...

jqueryhtmlmeta-tags

What causes the zoom effect on a flat surface when using reflection mesh in three.js, and what steps can be taken to fix it

Upon reviewing the example at , it is apparent that the reflection of the sphere remains true to scale when compared to the flat square. However, an illusion may occur where it appears as though the reflection is magnified. I attempted to adjust the param ...

javascriptthree.js

Is there a way to showcase a lightbox exclusively on the homepage of my blogger blog?

Here is the snippet of code I am struggling with: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'/> <script src='https://gj37765.googlecode.com/svn/trunk/html/[www.gj37765.blogspot.com]jquery.color ...

javascriptjqueryhtmlcsslightbox

The process of registering with JWT tokens and the challenge that arises when a token expires

I had the idea to implement a registration process that requires users to provide their username, email (which must not already exist in the database), password, and confirm password. The project is built using NextJS with pages router and Typescript. impo ...

javascriptreactjsnext.jsreduxjwt

Can hoek (from hapi.js) transform() function work with arrays?

Exploring the transform() functionality demonstrated in the Hoek documentation, is there a method to transform arrays within the source object? For instance, modifying the example to work with an array structure, such as this: var source = { address: ...

javascriptarraysjsonhapi.js

The pointerTap event is triggered 7 times when a PIXI.Sprite is clicked within a React component

Using the PIXI library in my React application to render animations, the stage is created with @inlet/react-pixi and gsap is used for tweening. During the initial launch of the app, a clickable sprite is created and an event listener "pointerTap" is added ...

javascriptreactjsgsappixi.js

Can you find a method to retrieve the current page on a dashTable?

I am facing a challenge with my dashtable which contains over 5000 records and is paginated to load faster. However, I have noticed that when I set the page size to 5000, the loading speed decreases significantly. I have implemented a function that retriev ...

pythonhtmlcssplotly-dash

Locate and dismiss a toast message (Toastr)

I have a webpage where I can add multiple popup notifications called toasts dynamically using the toastr plugin found at https://github.com/CodeSeven/toastr. Each toast has an Ok link that, when clicked, should only close that specific toast and not all v ...

javascriptjqueryangularjstoastrangular-toastr

Guide on aligning text below an image at the same height through flexbox styling

I am trying to use flexbox to make two images side by side have the same height and align the text under the image. Can anyone assist me with this issue? Here is the code I am currently using: .row{ display:flex; } .cell img{ width:150px ...

htmlcssflexboxgrid

Merging Data with mongoDB

Just starting out with MongoDB, I have developed an app that functions similar to Twitter with followers and following. Here is the schema I am working with: UserSchema : username:'Alex', pass:'salted', likes:'200&ap ...

javascriptnode.jsmongodb

Kendo sortable interference with input focus

Utilizing both kendo listview and grid components to display the same information in different views; a primary listview of cards and a table-based grid view, both integrated with the Kendo Sortable widget. The objective is to enable users to edit an inlin ...

javascripthtmljquerycsskendo-ui

Deactivate wheel event in jQuery

I am facing a challenge in designing my website using skrollr.js and fullpage.js libraries. Skrollr relies on the value of scrollTop to transform selected elements, while fullpage.js changes the top value of the viewport when scrolling, causing issues with ...

javascriptjqueryfullpage.js

No content visible at the top of the browser window on HTC Android (4.0.3) due to white space

We are currently developing a mobile web application with specific features. Our app contains a fixed header at the top of the page using position:absolute and top:0px, along with scrollable content below it. Additionally, there is a text area within the ...

javajavascriptandroidhtmlcss

Tips for displaying a combobox popover from @reach/combobox within a MUI dialog element

I've been attempting to integrate a map from the Google Maps API and a combobox popover from @reach/combobox within a MUI dialog component. However, I've encountered an issue where the combobox popover isn't displaying. After some investigat ...

javascriptreactjsmaterial-uicomboboxmodal-dialog

Exploring the properties of a file directory

As I try to access the d attribute of a path that was generated using Javascript, the output of printing the path element appears as follows: path class=​"coastline" d="M641.2565741281438,207.45837080935186L640.7046722156485,207.0278378856494L640.698 ...

javascriptd3.jssvg

"Utilizing Bootstrap to position the right column at the top on a mobile platform

I am in need of assistance with getting the correct div to display on top when viewed on a mobile device using Bootstrap. The issue is discussed and resolved in this particular discussion. To clarify, I would like my desktop layout to appear as follows: A ...

htmlcsstwitter-bootstrap

Web Page Content Scrambling/Character Exchange

I've encountered a perplexing issue that seems to strike randomly, yet I've managed to replicate the problem on three different desktops. Oddly enough, some other desktops never experience this issue and I'm at a loss as to what could be cau ...

javascriptphphtmlgoogle-chrome

Inject JSON data from jQuery into Thymeleaf template

I've successfully retrieved data using the Google Books API for ISBN, but I'm struggling to integrate that data into a form. Below is my jQuery code: $(document).ready(function(){ $('#submitCode').click(function(){ var x; ...

javascriptjqueryjsonthymeleafisbn

Are DOM Events compatible with ajax-loaded content that cannot be unloaded?

How should events be managed with ajax-loaded content that can be hidden or displayed? I have created a sidebar in HTML that toggles visibility on click, along with two pages that are loaded using ajax. When the sidebar is hidden or displayed, I need to ...

javascriptjqueryhtmlajax

Switching back regular text from a superscript in document.execCommand

Currently, I'm developing a customized text editor that utilizes a contenteditable div with some basic formatting features. To enable superscript functionality, I'm employing the command document.execCommand("superscript", false, undefi ...

javascripthtmleditortext-editorexeccommand