The issue of viewport device-height not functioning properly on Mobile Safari

I'm currently working on a web app for an iPad 3, but I'm facing an issue with the vertical scroll functionality. Strangely, this problem hasn't occurred when developing similar apps in the past, so I'm unsure of what's causing it this time.

Within the head element of my HTML, I have included the following meta tags:

    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
    <meta name="apple-mobile-web-app-capable" content="yes">

In my CSS file:

    html, body { width: 100%; height: 100%; overflow: hidden; }

While trying to debug the issue using weinre, I noticed that the document width and height were unexpectedly equal, even though they should differ significantly (especially in landscape mode).

    $(document).width();  // returns 1024
    $(document).height(); // returns 1024

After searching on various platforms like Stack Overflow, I've seen suggestions to add a viewport meta tag, which is already implemented in my code. Can anyone provide insight into how to solve this particular problem?

htmlioscssmobile-safariviewport

Answer №1

It appears that you may be utilizing multiple properties of viewport that could potentially clash with one another. According to Apple's recommendations, it is advisable to select only a few or even just one property to adjust and test independently, as the others are typically automatically determined.

Bootstrap's basic template suggests setting solely the width and initial-scale for optimal results.

Exercise caution when considering implementing features like maximum-scale that restrict user zooming capabilities, as this can inadvertently force users into uncomfortable text sizes (either too small or too large).

Answer №2

After some troubleshooting, I discovered that removing "height=device-height" from the viewport meta tag seemed to resolve the issue. It's strange because I simply copied and pasted this tag from another application where it was working fine. Here is the updated viewport configuration:

<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, target-densitydpi=device-dpi">

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

Secure access to Active Directory from an iOS device

Hey there, I've been searching all over for a solution to this problem with no luck. I have an ASP.NET web application that utilizes Windows Authentication. I have a set of public web services that are essential for the iPad App I recently created. T ...

c#asp.netios

Utilizing a combination of HTML, AJAX, and PHP, transfer an HTML input array via AJAX to a PHP webpage

Despite trying numerous similar solutions, none of them have proven effective for my issue. Within a form, users can input an unspecified amount of select options that can be added as needed using AJAX. My goal is to post this array to a PHP page via AJAX ...

javascriptphpjqueryhtmlajax

Having trouble inserting a new list item within a Bootstrap tab

I have a question regarding the creation of a tabbed interface using the code below: <ul class="nav nav-tabs"> <li class="active"><a href="#">Chart 1</a></li> <li><a href="#">Chart 2</a></ ...

htmlcsstwitter-bootstrap

Internet Explorer fails to execute CSS or jQuery commands

Apologies in advance for posing a question that may not be specific or beneficial to the wider community. Currently, my main focus is resolving this issue for my own peace of mind. In the process of designing a website, I implemented a social drawer featu ...

jqueryhtmlinternet-explorerdebuggingcss

Arrangement of 3 columns on the left and 1 column on the right using flex-box layout

My goal is to utilize flexbox in conjunction with bootstrap 4 to produce a design featuring 3 vertically stacked columns on the left, accompanied by a single column on the right that matches the height of the left columns. Following that, there will be som ...

htmlcssbootstrap-4flexbox

Selecting a variety of shapes from a painting

Within my canvas, there are various shapes like ovals, triangles, and squares. I am curious to know if it is possible to obtain a reference to one of these objects and animate it whenever a specific event occurs. Appreciate your attention to this query. I ...

javascripthtmlhtml5-canvas

To fill the remaining white space, add an underline after the last line of text

I'm struggling to implement a SCSS/CSS styling concept where I need to add a solid line before or after the last line of a heading. The challenge is that the width of the last line varies based on the screen size. I am open to any suggestions. Here&a ...

htmlcssreactjssassnext.js

Ways to verify if options have been chosen or not?

if(isset($_POST["marketing"])){ foreach($_POST as $key => $value){ if(strlen($value)<1) continue; echo "<option value='".$value."' selected >".$value."</option>"; } I have a PHP script that dynamically cre ...

phphtml

Tips for verifying the completion of loading in UI tests for WKWebView

When trying to capture a screenshot of the app loading an HTML file, I've run into issues where the WKWebView takes too long to load the content. As a temporary solution, I've had to resort to using sleep(5) to wait for the WKWebView to finish l ...

ioswkwebviewuitestwebviewdidfinishload

Fixed div at the bottom of the page that will stick to the top

Currently, I have a holding page for my website that is functioning as desired. It features some Vegas-style background fades and a simple navigation bar at the bottom fixed to the page with the following CSS: Position: absolute; bottom: 0; You can view ...

javascriptjqueryhtmlcss

Creating responsive input fields involves designing them in a way that they adjust their

Looking for help to make my input fields responsive and align the columns in the middle of the page with margins all around like shown below. Also seeking samples created with HTML, CSS, Bootstrap for reference. https://i.sstatic.net/DDR6m.png <!DOCTYP ...

htmlcssbootstrap-4

Error encountered when using Symfony 2 command line interface

Just started learning Symfony2 and encountered a problem. I made changes to my CSS and when I try to re-install them in Eclipse shell, I get this error message: 'C:\wamp\www\Symfony' is not recognized as an internal or external ...

csssymfony

Changing <br> to a newline ( ) using JSOUP

Is there a way to efficiently replace all occurrences of <br> with a new line character (\n) in HTML using Jsoup? I'm looking for a clean solution that will result in the Element#text() outputting plain text without any HTML, but with &bsol ...

htmljsoup

Guide to using AVAssetWriter for writing multiple times to a single file

After successfully recording and saving a video to the documents directory using AVFoundation, I'm wondering if it's possible to reopen that saved video file and start recording from where it left off. Do I need to create multiple video files and ...

iosobjective-cavfoundationavassetwriter

The Challenge of CSS 3D Transformation Angles

Currently, I am utilizing CSS3 for a transformation on a div with the following properties: '-webkit-transform' : 'rotateX(45deg) rotateZ(-45deg)' The outcome appears like this: Alternatively, you can view it in action in this fiddle ...

csscss-transforms

Struggling with making a rest API request to render HTML

I am trying to retrieve the holders value from a REST API and display it on my website using HTML code. I've attempted the following code, but I'm having trouble actually printing the value. <!DOCTYPE html> <html> <body> <p& ...

htmlweb

Instead of using <div>, try substituting it with a different HTML page

Seeking assistance on an HTML page project that involves jQuery, CSS, and HTML without server-side integration. Encountering an issue when attempting to replace a <div> with content from another HTML file saved on my computer. The main page code sni ...

javascriptjqueryhtmlajaxweb

Click to activate the Selectfield option

There are 3 links that populate the select field with various options. When the text label is active and someone clicks on the link selectlist1 or another, it should activate the select label. How can this be achieved? <!doctype html> <html> ...

javascriptjqueryhtml

I've been attempting to upload application/pdf files, but I'm having trouble. Can you provide me with instructions

'<?php $allowedExts = array("jpg", "jpeg", "gif", "png"); $extension = end(explode(".", $_FILES["file"]["name"])); if ((($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/ ...

phphtmlfilepdfupload

Can a child element be positioned above its parent's y-scrollbar using CSS?

I have created a selection box using <ul> and <li> elements. Some of the list items are wider than the parent box, so I used an :after pseudo-element to overlay them with full content when hovered over. Everything was working perfectly, until ...

htmlcss