The feature for height is not functioning correctly on IOS devices, specifically iPhones

Question

The feature for height is not functioning correctly on IOS devices, specifically iPhones

Recently, I designed a website on CodePen which you can view here. My goal was to make it responsive across all platforms, but I encountered an issue specifically with IOS. It seems like a single div covers the entire page on IOS and some height elements are not functioning properly, causing content to not fit correctly.

Despite spending days trying to troubleshoot, I still cannot figure out why the heights and rules are acting differently on IOS.

I attempted to remove the video section, which did reveal most of the page except for the blank white eind section. Adding max-height seemed to improve the situation slightly, but the limitation in vertical space remains unresolved on IOS, making this solution inadequate.

Changing the position property also didn't yield any positive results.

It appears that the height properties are malfunctioning exclusively on IOS. Can anyone assist me in understanding the root cause of this issue?

(JavaScript snippet here)

(CSS code snippet here)

html ios css iphone responsive

Answer 1

Answer №1

The issue is not with IOS specifically, but rather with responsiveness. By setting a fixed height for each section, they are overlapping on mobile devices.

To fix this, simply set all section heights to height: 100vh.

Additionally,

@media (max-width: 430px){
    .introductie {
    height: 300vh;
    overflow: hidden;
}
}

This solution should resolve the problem.

Answer 2

The issue is not with IOS specifically, but rather with responsiveness. By setting a fixed height for each section, they are overlapping on mobile devices.

To fix this, simply set all section heights to height: 100vh.

Additionally,

@media (max-width: 430px){
    .introductie {
    height: 300vh;
    overflow: hidden;
}
}

This solution should resolve the problem.

Answer 3

Answer №2

I have discovered the solution I was looking for.

It turned out to be a JS script that automatically determines the window's height and assigns that height to a specific class.

However, that alone didn't solve the issue completely. The heights were more consistent and no longer scattered when I applied height:100%; to the html, body, and section elements.

I implemented media queries based on the max-height for different phone sizes to ensure proper expansion beyond the designated sections.

Visit the website here

The JavaScript solution is as follows:

// Code snippet for setting div height to window height on document ready
$(document).ready(function(){ 

    var nVer = navigator.appVersion;
    var nAgt = navigator.userAgent;
    var nameOffset,verOffset,ix;

    if(navigator.platform == 'iPhone' || navigator.platform == 'iPod'){
        if ((verOffset=nAgt.indexOf('Safari'))!=-1) {
          var mobileSafari = 'Safari';
        }
    }

    //===== FULL HEIGHT =====\\

    if (mobileSafari == 'Safari') { 
        $('.full-height').css('height',(($(window).height()) + 60)+'px');
    } else {
        $('.full-height').css({'height':($(window).height())+'px'});  
    };
});

// Additional resizing logic for maintaining correct height on window resize
$(window).resize(function(){
    if (mobileSafari == 'Safari') { 
        $('.full-height').css('height',(($(window).height()) + 60)+'px');
    } else {
        $('.full-height').css({'height':($(window).height())+'px'});  
    };

 /* //===== HALF HEIGHT =====\\

    if (mobileSafari == 'Safari') { 
        $('.half-height').css('min-height', (($(window).height() / 2) + 60) + 'px'/2);
    } else {
        $('.half-height').css({'min-height': ($(window).height()/2) +'px'});
    };

$(window).resize(function(){
    if (mobileSafari == 'Safari') { 
        $('.half-height').css('min-height', (($(window).height()/ 2) + 60) + 'px');
    } else {
        $('.half-height').css({'min-height': ($(window).height()/ 2) + 'px'});
    };
});

    // Other sizing logics follow here...

});

And here is the CSS (using SCSS) solution:

// Media queries for various phone sizes
@media (max-height: 736px) {
  .full-height{
    max-height:736px;
  }
  .introductie-mobile {
    height: 1200px !important;
    max-height: 1200px;
  }
}

@media (max-height: 667px) {
  .full-height{
    max-height:667px;
  }
  .introductie-mobile {
    height: 1200px !important;
    max-height: 1200px;
  }
}

@media (max-height: 568px) {
  .full-height{
    max-height:568px;
  }
  .introductie-mobile {
    height: 1200px !important;
    max-height: 1200px;
  }
}

Answer 4

I have discovered the solution I was looking for.

It turned out to be a JS script that automatically determines the window's height and assigns that height to a specific class.

However, that alone didn't solve the issue completely. The heights were more consistent and no longer scattered when I applied height:100%; to the html, body, and section elements.

I implemented media queries based on the max-height for different phone sizes to ensure proper expansion beyond the designated sections.

Visit the website here

The JavaScript solution is as follows:

// Code snippet for setting div height to window height on document ready
$(document).ready(function(){ 

    var nVer = navigator.appVersion;
    var nAgt = navigator.userAgent;
    var nameOffset,verOffset,ix;

    if(navigator.platform == 'iPhone' || navigator.platform == 'iPod'){
        if ((verOffset=nAgt.indexOf('Safari'))!=-1) {
          var mobileSafari = 'Safari';
        }
    }

    //===== FULL HEIGHT =====\\

    if (mobileSafari == 'Safari') { 
        $('.full-height').css('height',(($(window).height()) + 60)+'px');
    } else {
        $('.full-height').css({'height':($(window).height())+'px'});  
    };
});

// Additional resizing logic for maintaining correct height on window resize
$(window).resize(function(){
    if (mobileSafari == 'Safari') { 
        $('.full-height').css('height',(($(window).height()) + 60)+'px');
    } else {
        $('.full-height').css({'height':($(window).height())+'px'});  
    };

 /* //===== HALF HEIGHT =====\\

    if (mobileSafari == 'Safari') { 
        $('.half-height').css('min-height', (($(window).height() / 2) + 60) + 'px'/2);
    } else {
        $('.half-height').css({'min-height': ($(window).height()/2) +'px'});
    };

$(window).resize(function(){
    if (mobileSafari == 'Safari') { 
        $('.half-height').css('min-height', (($(window).height()/ 2) + 60) + 'px');
    } else {
        $('.half-height').css({'min-height': ($(window).height()/ 2) + 'px'});
    };
});

    // Other sizing logics follow here...

});

And here is the CSS (using SCSS) solution:

// Media queries for various phone sizes
@media (max-height: 736px) {
  .full-height{
    max-height:736px;
  }
  .introductie-mobile {
    height: 1200px !important;
    max-height: 1200px;
  }
}

@media (max-height: 667px) {
  .full-height{
    max-height:667px;
  }
  .introductie-mobile {
    height: 1200px !important;
    max-height: 1200px;
  }
}

@media (max-height: 568px) {
  .full-height{
    max-height:568px;
  }
  .introductie-mobile {
    height: 1200px !important;
    max-height: 1200px;
  }
}

Answer 5

Answer №3

The top black

<div class="video-section">

adjusts to full height on any device, including iPhones, so the issue does not lie with the height itself.

However, on other devices, the next

<div class="sign-up-banner">

shifts dynamically with a parallax effect as you scroll down. Once you have scrolled past the top black

<div class="video-section">

, the entire second

<div class="sign-up-banner">

becomes fully visible due to JavaScript code. Unfortunately, this JavaScript is not functioning properly on iPhones.

Some CSS properties assigned to the <form> within the <div id="coming-soon"> are still being applied, causing the div to remain stuck behind the first one.

To resolve this, you can use the following CSS:

.sign-up-banner{
    position: static;
    height: auto;
}

#mc_embed_signup form{
    position: static !important;
    -ms-transform: none; /* IE 9 */
    -webkit-transform: none; /* Chrome, Safari, Opera */
    transform: none; 
}

You may wrap this in a media query to specifically target certain screen sizes and apply it to iPhones like so:

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
    //insert your css here
}

This will apply the specified CSS to iPhone 4 and 4s models. While it may not be foolproof for excluding all other devices, CSS limitations prevent direct targeting of specific devices. For more guidance on media queries for various devices, refer to https://css-tricks.com/snippets/css/media-queries-for-standard-devices/.

Answer 6

The top black

<div class="video-section">

adjusts to full height on any device, including iPhones, so the issue does not lie with the height itself.

However, on other devices, the next

<div class="sign-up-banner">

shifts dynamically with a parallax effect as you scroll down. Once you have scrolled past the top black

<div class="video-section">

, the entire second

<div class="sign-up-banner">

becomes fully visible due to JavaScript code. Unfortunately, this JavaScript is not functioning properly on iPhones.

Some CSS properties assigned to the <form> within the <div id="coming-soon"> are still being applied, causing the div to remain stuck behind the first one.

To resolve this, you can use the following CSS:

.sign-up-banner{
    position: static;
    height: auto;
}

#mc_embed_signup form{
    position: static !important;
    -ms-transform: none; /* IE 9 */
    -webkit-transform: none; /* Chrome, Safari, Opera */
    transform: none; 
}

You may wrap this in a media query to specifically target certain screen sizes and apply it to iPhones like so:

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
    //insert your css here
}

This will apply the specified CSS to iPhone 4 and 4s models. While it may not be foolproof for excluding all other devices, CSS limitations prevent direct targeting of specific devices. For more guidance on media queries for various devices, refer to https://css-tricks.com/snippets/css/media-queries-for-standard-devices/.

The feature for height is not functioning correctly on IOS devices, specifically iPhones

Answer №1

Answer №2

Answer №3

Similar questions

Troubleshooting issues with nested NSDictionary and NSArray when using AFNetworking

Rotate the circular border in a clockwise direction when clicked

Using Four Different Colour Borders in CSS

Enhance your calendar with sleek jQuery styling

Transfer a Realm from Bundle to Documents directory, and then store it as a local constant in Swift 2.0

Resetting the delete button in a UITableView

Images are not appearing correctly on Chrome browsers when using Windows operating system

Slider for comparing images is currently malfunctioning in Firefox

Symbols duplicated for architectures [arm7, arm64]

What is the method for specifying the HTML file extension within Visual Studio?

Modify background color when a column is clicked in a dynamically filled table

Is there a way to create an <a> element so that clicking on it does not update the URL in the address bar?

"Troubleshooting a Python MySQL error related to the WHERE clause

Can you insert a query into an HTML value?

Is there a way to implement FocusState to dismiss the keyboard by tapping anywhere on the screen, except for the text field itself?

Convert an Objective-C app to a Swift app

Center the image to always align with the text

The page remains static even as the function is executed

Assign a unique identifier to the Angular mat-checkbox component

How can we use a generic function in Swift to identify the type of an instance?