Web page adjusts to fit entire screen on iOS devices

After creating a mobile version of my webpage that functions well on Android and small browser windows, I encountered an issue with iOS. When users pinch the screen on iOS devices, it zooms out to fit the entire page, which is not ideal for a long page like mine.

I have tried using the following viewport meta tag:

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

Despite knowing about the known issue in iOS 10 with overriding user-scalable=no, I am experiencing the same problem on iOS 9 and 8 as well.

If anyone has any suggestions on how I can resolve this issue, I would greatly appreciate it.

Thank you

htmlioscssresponsive-designfrontend

Answer №1

Although this topic may be considered old, it remains a popular search result for those facing this issue. Disabling zooming is not necessary to resolve this problem. Instead, the following viewport tag allows users to maintain the ability to zoom in and out while addressing the display issue when pinching the site.

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=5,minimum-scale=1,user-scalable=yes"/>

Answer №2

This is the accurate way to structure the meta tag:

<meta content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0,width=device-width" name="viewport">

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

What is the best way to compare two CSS files and selectively replicate just the discrepancies?

Is there a way to compare and copy different information from CSS files into another file? For instance, if I have two CSS files named a.css and b.css, is there a method to automatically select and copy only the differences between the two files? Thank y ...

htmlcssfileweb

Trouble with jQuery noConflict function not resolving as expected

I'm attempting to use both jQuery 1.4 and 2.0 by utilizing the noConflict function, but the code isn't working as expected. Here is an example of my document head: <script src="js/jquery-2.0.0.min.js" type="text/javascript"></script> ...

javascriptjqueryhtmlcss

How to create a WordPress sidebar that remains fixed while scrolling

I have a WordPress website with a right sidebar that I want to make sticky while scrolling up and down. I applied some CSS styles to achieve this, and now the sidebar is sticky. However, the issue is that it keeps shifting its position from right to left. ...

phphtmlcsswordpress

Ways to enhance speech recognition on ios specifically for entering numbers?

Using the iOS speech recognition feature has proven to be effective when there is sufficient context provided. However, when it comes to inputting numbers, I have encountered some issues. For instance, single-digit numbers like 2 may be misinterpreted as " ...

iosspeech-recognitionsfspeechrecognizer

Input box for text prompt

I am looking to create a popup alert view that allows the user to input text. I have tried the code below. It works, but I would like to have a larger text area, similar to a UITextView. However, when I try to use a UITextView with a larger frame, it cove ...

iosobjective-cuialertview

Tips for keeping a span element from breaking onto a new line in responsive web design

Here is a simple list with h4 headings, each ending with a span element. <ul class="items"> <li> <h4>Avoid Line Break Of Plus <span class="goto">o</span></h4> </li> <li> <h4> ...

htmlcssresponsive-designline-breaks

Incorporate a dialogue box utilizing jQuery with dynamically created HTML elements using jQuery

Is it possible to add a jQuery dialog using a string containing HTML code stored in a variable? I have tried out some code, and you can view it here. $("#remove-post").dialog({ autoOpen: false, height: 'auto', width: 'auto&a ...

javascriptjqueryhtml

What steps can I take to restore my text_field to its original dimensions?

I recently added the token-input-mac.css file to my project and noticed that my text_area has become extremely small, resembling a text input field. How can I maintain the new css styling while only adjusting the height of the text_field? Here is the toke ...

css

<select> Choices are updated without the need for AJAX

Question I am working on a project with two dropdown select inputs. The first one is for selecting the country and the second one is for choosing a more specific location within that country. For example, if you choose "United Kingdom" as the country, you ...

javascriptphpjqueryhtml

The problem of border-radius bleeding in Webkit when applying -webkit-transform

After creating a basic jQuery script to slowly rotate an image, I encountered an issue where the rotated image would bleed over the border-radius in Chrome. The rotation works smoothly in Firefox 4.0.1 but not in Chrome. To see the example and code, check ...

csswebkit

Hamburger Menu Design with Bootstrapping

I am working on creating a responsive navbar that displays as a traditional desktop menu and switches to a hamburger menu for mobile devices. However, I have encountered an issue with the hamburger menu overlapping part of the background image. I want the ...

htmlcss

"Discover the process of utilizing jQuery to trigger an action when scrolling past a

I'm currently working with this code snippet: #main { max-width: 500px; height: 900px; margin: auto; background: green } .menu1 { height: 30px; background: red } .menu2 { display: none; } <div id="main"> <div class="menu1"& ...

javascriptjqueryhtmlcss

Removing specific characters from HTML code with ASP

Can someone help me understand how to make the page display HTML code while excluding specific characters like this one (ü)? ...

c#asp.nethtmlcharacter-encoding

The issue of custom breakpoints not functioning properly with Bootstrap 4's navbar-expand-* feature

Here is my customized Bootstrap navbar: <div class="container-fluid bg-secondary"> <nav class="navbar utep-nav navbar-inverse navbar-expand-lg"> <button class="ut-toggler navbar-toggler ml-auto" type="button" data-toggle="collapse ...

htmlcsstwitter-bootstrapbootstrap-4

Accessing a React application via a hyperlink within an HTML file

I'm dealing with a situation where I have an HTML file containing a list of links. While some of the links direct to other HTML files, I'm trying to have one link lead to a React application. However, I have not had success in opening the app lik ...

htmlreactjshref

I'm having trouble rendering the div using PHP code within an AJAX request in CodeIgniter

I am a beginner in AJAX and I'm attempting to display specific restaurant data based on the selected area from a dropdown using AJAX. However, I am facing issues with displaying the restaurant view correctly. Can someone please guide me on how to proc ...

phpjqueryhtmlajaxcodeigniter

What is the best way to ensure that a nav-item is the correct width to display its content in a single line?

I want to ensure that my nav-item elements have enough width to display their content on a single line, as currently the content is wrapping onto two lines: Sample Code: https://jsfiddle.net/tavyhkem/2/ <ul class="navbar-nav mt-2 mt-lg-0"> ...

htmlcsstwitter-bootstrapbootstrap-4

Disappearing text editor content in React Js

I have created a basic accordion feature with a text editor inside each accordion. Accordion.js <div className="wrapper"> {accordionData.map((item, index) => ( <Accordion> <Heading> <div styl ...

javascripthtmlreactjseditoraccordion

Displaying a JavaScript variable inside the HTML content by making a call to innerHTML function from

I am facing an issue where I have two separate Javascript files linked to a single HTML file. Within this HTML file, I have declared a variable in one of the JS sections (script section) that I would like to print within the innerHTML part of another JS fi ...

javascriptjqueryhtmlhtml-table

Rotating the iPhone causes the view controller to refresh

I am facing an issue with my viewcontroller containing an SKview (using spritekit) inside of it. Every time I change the orientation of my phone, the viewcontroller reloads as if I just opened the app (even though it is the initial one). Has anyone found ...

iosxcodesprite-kit