Discovering the perfect iPhone X landscape safe area and notch adjustment.
I decided to share this inquiry in order to assist those struggling with adjusting their websites for the latest iPhone model 10.
The main issue revolves around pesky white bars appearing on the screen.
To overcome this issue, the solution is to incorporate viewport-fit=cover
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
While this will utilize the entire screen, what about the notch?
The approach is to create a specific class
.iphoneX{
padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
}
Add this class to the website wrapper and problem solved? Not quite
Full-width images and divs with various colors may get cropped
In my case, I use <section> for background images or colors, adding a div within the section for content. Instead of using .iphoneX on the website wrapper, I applied .iphoneX_rl to the div
.iphoneX_rl{
padding: 0 constant(safe-area-inset-right) 0 constant(safe-area-inset-left);
}
This covers the right and left sides, but what about the bottom?
.iphoneX_footer{
padding: 0 0 constant(safe-area-inset-bottom) 0
}
Integrate this into the last div (container) in your footer section
With these adjustments, my website displays properly on iPhone X/10. However, viewing it on an iPhone 8 pushes the content to the edges. Is it now time for js/jquery manipulation?
if (navigator.userAgent.match(/(iPhone)/)){
if((screen.availHeight == 812) && (screen.availWidth == 375)){
if((window.innerHeight == "375") && (window.innerWidth == "812")){
$('.someClass,.someClass,.someClass').addClass("iphoneX_rl");
alert("ok iphone X - L");
}else{
$('.someClass,.someClass,.someClass').removeClass("iphoneX_rl");
alert("ok iphone X - P");
}
}
}
navigator.userAgent.match(/(iPhone)/)(screen.availHeight == 812) && (screen.availWidth == 375)((window.innerHeight == "375") && (window.innerWidth == "812"))If your website utilizes Google Maps, include this class in landscape mode
$('#map_section').addClass("gm_iphoneX");class definition:
.gm_iphoneX div.gmnoprint{
margin-right: 40px !important;
}
If there's a more efficient method or something that was overlooked, please share your insights Thank you
Observations: When using iOS UIWebView, the screen’s available height measures 768 pixels. However, with iOS WKWebView, the available height remains consistent at 812 pixels.
I have a project for my client where they need to choose a car and then indicate where the damage is located on an image, which is divided into 6 sections. I'm struggling to figure out how to achieve this. I initially thought z-index would work, but ...
I'm currently working on an app that utilizes Vue.js and Firebase for authentication. I am trying to implement a verification process using the beforeEach method in my router file to ensure that users can only sign in if their displayName matches a sp ...
Currently, I am facing an issue while attempting to incorporate both jquery.validate and jquery.uploadfile on the same page. The error message I'm receiving is: TypeError: validator is undefined if ( validator.settings.rules ) { Interestingly, if ...
This HTML code includes a dropdown menu created using Bootstrap. It contains navigation links for Home, Add User, Export, and Logout. <ul class="nav navbar-nav navbar-right"> <li <?php if($tabs=='home' or $tabs=='') ech ...
I am currently struggling to figure out how to calculate only the grand total of the first table using just one jQuery/JavaScript script. The code I am referencing is from: Below is the code snippet: <!DOCTYPE html> <html xmlns="http://www.w3 ...
I'm struggling with extracting Tweets from a verified user and could use some assistance. I know it's a broad question, but here's the situation: https://github.com/ttezel/twit provides a way to access tweets from any Twitter account. Howev ...
In my JavaScript code, I am trying to position objects above each other relative to a center point at coordinates 0,0. The number of objects, their sizes, and the spacing between them are all variable. This image illustrates my situation best (hopefully ; ...
I am currently working with Angular 4 and Bootstrap 4 (alpha 6). I have implemented ngx-infinte-scroll to fetch data from the server when the user scrolls to the top or bottom of the div. The issue I am facing is that the user can only scroll when there ar ...
I need assistance with extracting values from a JSON string within my webpage. I have implemented dynamic IDs in my select drop-down and now aim to create an IF loop that compares the selected value in the drop down to "some text." If the comparison matche ...
After successful login, I expect a certain variable to be updated with the appropriate value. However, during testing, all I see is 'undefined' returned. This variable does change when interacting with the app, showing an error message like &apo ...
The code snippet provided retrieves state names and miles in the format TN 71.6 mi. I am attempting to remove the mi by converting the string to a number while ignoring unwanted characters. Strangely, when using the parseFloat function, it appears to be ...
I am working with CodeIgniter and I have a JSON array in my Controller file that was obtained by calling various APIs: { "Specialities": [{ "SpecialityID": 1, "SpecialityName": "Eye Doctor" },{ "SpecialityID": 2, "S ...
Hey there, I'm struggling with identifying the input id button in my HTML code while using Selenium through Java. The error message says it's unable to locate the element. Can anyone provide some guidance? I've already tried using xpath and ...
As I delve deeper into learning React and experimenting with some basic concepts, I have encountered a seemingly straightforward issue that has left me stumped. Despite my best efforts to search for a solution online, I have come up empty-handed. The crux ...
I've come across a particular markup structure that has caught my attention: <!-- .section markup with line breaks and indentation (normal formatted coding) --> <form id="form" name="form"> <div class="section"> <input type ...
Consider creating a large nuxt application with 100 routes. What strategies would you recommend for effectively managing these routes within the app, excluding micro-frontend solutions? ...
Our manufacturing company collects and documents data for the parts we produce. Currently, this information is logged on a spreadsheet with drawing dimensions in one column and actual measured values in another. The cell where the actual measured value i ...
This is an example image I want to use: Is there a way to set a fixed height for all my bootstrap panels? <div class="col-md-3 padding-0"> <div class="panel panel-default"> <div class="panel-body" style="min-height: 10px; max-height ...
Similar Question: How can I retrieve the height and width of an image using JavaScript? Typically, we can determine the image width using $('img').width() or $('img').css('width') when a width is specified as shown below ...
As a beginner in jQuery, I have been exploring different animations and recently came across an issue with Firefox compatibility. I discovered the animate.css library, and decided to incorporate its animations into text captions on a slider using the Soli ...