Disable Zoom on Mobile Devices (native App Style)

2 years ago

< 1 min read

Posted by:

Focus

Subscribe to newsletter

By subscribing you agree to with our Privacy Policy.

Share

Go to Dashboard > Elementor > Custom Code > Add New Code.

This code will disable the abilty to zoom on mobile devices. PWA projects are the common usage.

IMPORTANT
You have to set the ‘Section’ overflow to ‘hidden’.

<body>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<?php $viewport_content = apply_filters( 'hello_elementor_viewport_content', 'width=device-width, initial-scale=1' ); ?>
	<meta name="viewport" content="<?php echo esc_attr( $viewport_content ); ?>">
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<?php wp_head(); ?>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</body>

Read more

Container

< 1 min read

Hide Scroll Bar On ‘Overflow: Auto’ Container

Add this following CSS code to the container: selector {-ms-overflow-style: none; /* IE and Edge / scrollbar-width: none; / Firefox

Read more

Troubleshoot

< 1 min read

How to Fix Whatsapp Share Line Break Missing (Elementor Share Widget)

A bug found on the share widget (last checked on Elementor Pro version 3.6.4) where there is no line break

Read more

PWA

4 min read

How to Publish an App with PWA for WP

Note: On PWA for WP, the icon logo and splash screen are swapped. Please test the .apk before publishing. Also,

Read more

Single Post

< 1 min read

Enhance WordPress Buttons

Optimize your WordPress site with these CSS tweaks. Elevate button aesthetics and code block readability for a better user experience

Read more

See How It Works

Create better websites, faster.

Download the Entire Library

Adaptative, neutrally designed components.

Customer Service

Focus Website

Today, June 1

Hi, there 👋

How can I help you?

Start Chat with:

We use cookie to improve your experience on our site. By using our site you consent cookies.