Viewport Scrolling and Pinching on Safari Browser with Bootstrap 4 Website Still Possible

I have experimented with using Bootstrap 4 skeleton and have tested different viewport meta tags. The built-in Bootstrap viewport meta tag I used is:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

I also researched and tried a custom meta tag like this:

<meta name="viewport" content="width=device-width, shrink-to-fit=no, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">

Despite these efforts to prevent pinch and zoom on the website, it still remains pinch-able and zoom-able in Safari mobile browser. While testing on Android, the website was not zoom-able as expected, but the issue persists in Safari. What could be causing this discrepancy?

htmlcssbootstrap-4safariviewport

Answer №1

To improve your viewport display, try implementing the following code snippet which has proven effective for me:

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

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

It seems that Ionic 2 does not support the registration of custom HTML tags

Encountering a problem with Ionic 2 and custom components. Developed a component to show in a list, serving as the list item. However, my app crashes when attempting to use the custom HTML tag. The stack trace is provided below. Uncertain about the issue. ...

htmlangulartypescriptionic2components

Accurately replicate the Logout functionality of asp:Login within the siteMap

How can you effectively integrate/simulate the Logout feature in asp:Login for a siteMapNode? <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false"> <AnonymousTemplate> <%--[ <a href ...

c#htmlasp.netsitemaplogout

Blog Writer: Picture quality compromised when adjusting size

Issue with blurry images after resizing. The problem is noticeable in the three main images located under the Header section. To preview the blog, click on this link: Click Here Your assistance in solving this issue would be greatly appreciated. Thank yo ...

javascriptjqueryhtmlcssblogger

The curious case of CSS nth-of-type quirks

I am using CSS nth-of-type(even) to organize divs. It usually works fine, but when I send an AJAX request and add new HTML div after another one, the selector starts behaving strangely. .row > .cd-timeline-block-sort:nth-of-type(even) > .cd-timeline ...

htmlcss

Issue with CSS not getting applied to content placed within modal dialog on Internet Explorer

After writing some code, I encountered a situation where I have multiple jQuery UI modal dialogs. I decided to remove the default title bar provided by jQuery in these modal dialogs. The code snippet I used within the create function in the dialog code to ...

jqueryhtmljquery-uicss

The stylesheet displays correctly in Grover debug mode, but does not appear in the downloaded PDF file

Having some trouble applying CSS to Grover, a tool I'm using to render and download PDF copies of documents generated in my app. While the CSS renders as expected in Grover's debug mode (rendered in Chromium), it seems that my application.css is ...

cssruby-on-railsruby-on-rails-5asset-pipeline

What is the proper way to incorporate parentheses (either "(" or ")") on the JavaScript calculator's output screen?

This is the customized button I made for the parentheses. <div class="col"> <button class="parentheses rounded-pill btn-outline-primary btn btn-lg" id="keyButton" data-key="operator"&qt;()</but ...

javascripthtmlcssbootstrap-5

What are some recommendations for a great place to study CSS?

Can anyone recommend a great resource for mastering CSS? I'm looking to go beyond the basics of how rules are matched and understand how to integrate various skills to create more complex projects. While the W3School tutorials are helpful for understa ...

css

Tips for resolving issues with the carousel container in bootstrap?

Is there a way to adjust the carousel box container in Bootstrap so that it remains consistent even with images of varying sizes? Currently, the box size changes based on the image dimensions when sliding through the carousel. Sample Code: <h1>Caro ...

javascriptjqueryhtmltwitter-bootstrapcarousel

Guide to setting up a Datetime picker in Bootstrap 5 user interface

I've been struggling to implement a datetime picker for Bootstrap 5 (my front end is using Bootstrap 5.1.0). While I came across a solution for Bootstrap 3, unfortunately it doesn't seem to work with Bootstrap 5. ...

htmlbootstrap-5datetimepicker

Issue with background image responsiveness in Bootstrap jumbotron class when resizing the screen

Currently, I am delving into the world of bootstrap as I work on a tribute page for the first time. The issue at hand revolves around the responsiveness of the background image within the jumbotron class. Upon resizing the screen, only half of the image is ...

htmlcsstwitter-bootstrapbootstrap-4

I designed a dropdown menu with a searchable <mat-select> feature, where selecting an item is automatic when a space bar is pressed in the search box

Description : I have implemented a dropdown list using element that contains a list of items along with a search field. This allows users to easily search for specific items in the list instead of manually scrolling through a long dropdown menu. They can ...

javascripthtmlangularmat-selectmat-option

How can custom JavaScript objects have tags set upon click?

When it comes to JavaScript object referring, things can get a bit confusing. Imagine having a tag like this: <button id='myButton'>Hello</button> Now, let's say you create a custom class in JavaScript: function myClass(){ ...

javascripthtmlfunctionjavascript-objects

Checkbox in Bootstrap should be displayed before the submit button on smaller screens

I've been searching for a solution to this issue without any luck. In my setup, there are three input fields and a submit button displayed side by side on large screens, enclosed in <div class="col-sm"> to stack vertically on mobile devices. Ho ...

cssbootstrap-4

Access the style of the first script tag using document.getElementsByTagName('script')[0].style or simply refer to the style of the document body with document.body.style

Many individuals opt for: document.getElementsByTagName('script')[0].style While others prefer: document.body.style. Are there any notable differences between the two methods? EDIT: Here's an example using the first option: ...

javascriptcssstyles

how to show an error in a modal window when encountering an error

Using Blazor and Blazorstrap, typically when the server disconnects, an "Error" message is displayed. However, with the BsModal from Blazorstrap, it appears in the background layer, making it unresponsive. How can this be fixed? Is it possible to close the ...

javascriptcssbootstrap-4blazor-server-side

Submitting forms with Ajax in IE(8)

Sample Google form Related spreadsheet I modified the original code to create two custom forms: First created form Second created form Both forms are functional on most browsers except for IE(8). Any idea why? First form: <!DOCTYPE html> <h ...

javascriptjqueryhtmlajaxforms

HTML5 format for credit card expiration date (MM/YY)

I've been attempting to create a regular expression pattern for credit card expiration date input that will produce the format mm/yy So far, I have come across a pattern that uses the format yyyy-mm-dd, as shown below: <input type="text" pattern= ...

regexhtmlformsinput

Utilizing ElementRef in Angular 4 to close dropdown when clicking outside of it

I recently came across this helpful tutorial, but I'm having trouble grasping how it actually functions. Here's the code snippet I've incorporated into my TypeScript file: @Component({ host: { '(document:click)': 'onOuts ...

javascripthtmlangulardropdown

The addScript feature seems to be experiencing difficulties upon the initial website load

Currently, I am utilizing the jquery.flexslider plugin and it is performing well. However, I have a specific requirement where I do not want to load the plugin for screens that are smaller than 600px. After experimenting with various scripts, I have final ...

javascriptjqueryhtml