logo
down
shadow

Get safe area inset top and bottom heights


Get safe area inset top and bottom heights

Content Index :

Get safe area inset top and bottom heights
Tag : ios , By : lwl_seu
Date : November 13 2020, 03:01 PM

wish helps you On the new iPhone X, what would be the most proper way to get both top and bottom height for the unsafe areas? , Try this :
In Objective C
if (@available(iOS 11.0, *)) {
    UIWindow *window = UIApplication.sharedApplication.keyWindow;
    CGFloat topPadding = window.safeAreaInsets.top;
    CGFloat bottomPadding = window.safeAreaInsets.bottom;
}
if #available(iOS 11.0, *) {
    let window = UIApplication.shared.keyWindow
    let topPadding = window?.safeAreaInsets.top
    let bottomPadding = window?.safeAreaInsets.bottom
}

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

How to find out the distance from the bottom safe area edge to the bottom of the screen?


Tag : ios , By : Anonymous
Date : March 29 2020, 07:55 AM
should help you out I need to calculate the distance between the bottom anchor of the safe area and the bottom of the screen. Is there a way to do that in code given a view? , Try this one
if #available(iOS 11.0, *) {
    let window = UIApplication.shared.keyWindow
    let bottomPadding = window?.safeAreaInsets.bottom
}

How to declare css fallback from max(env(safe-area-inset-bottom))


Tag : css , By : techthumb
Date : March 29 2020, 07:55 AM
it fixes the issue This is not really how CSS Fallbacks work. Take the following snippet for example :
.some-selector {
    width: 200px;
    width: max(50px , 200px);
}
div {
  width:250px;
  height:200px;
  background: green;
  transform: translateY(50px);
}


@supports (width: max(5px,5px)) {
   div {
     transform: translateY(max(50px, env(safe-area-inset-bottom))) !important;
   }
}
console.log(CSS.supports("width", "max(5px,10px)"))
console.log(CSS.supports("transform","translateY(max(50px, env(safe-area-inset-bottom)))"))

Using calc() with env(safe-area-inset)


Tag : ios , By : vitorcoliveira
Date : March 29 2020, 07:55 AM
will help you I am wanting to use env(safe-area-inset-bottom) to add margin-bottom to an element, but only when the device is an iPhone X. However, the margin added using env(safe-area-inset-bottom) does not add enough to my liking, and I wish to add an additional 34px to the bottom margin. , You can wrap the calc in a @supports query like so:
.rule {
  margin-bottom: 34px;

  @supports (margin-bottom: env(safe-area-inset-bottom)) {
    margin-bottom: calc(env(safe-area-inset-bottom) + 34px);
  }
}
@mixin supports-safe-area-insets {
  @supports (padding-top: env(safe-area-inset-top)) {
    @content;
  }
}
.rule {
  margin-bottom: 34px;

  @include supports-safe-area-insets {
    margin-bottom: calc(env(safe-area-inset-bottom) + 34px);
  }
}

env(safe-area-inset-top) not working on Android Pie + WebView 69


Tag : development , By : Funkwarrior
Date : March 29 2020, 07:55 AM
I wish this help you Support for env() constants was introduced in Chrome 69. Though the behavior, as I observe, is different from iOS. On iPhone 8 screen without notch env(safe-area-inset-top) equals to 20px, while on Moto G screen, without notch as well, it equals to 0.
As a workaround I'm using this function to set a class to body as soon as page loaded:
/**
 * Android save-area env variables behave differently from iOS ones:
 * env(safe-area-inset-top) will return 0 on Android and 20px on iOS.
 * In case android behavior spotted, body is added class `app-android-safe-area`
 */
function checkSafeArea() {
  const $body = $(document.body);
  const $div = $('<div style="padding-top: env(safe-area-inset-top); padding-top: constant(safe-area-inset-top);"></div>');

  $div.appendTo($body);

  const safeAreaInsetTop = $div.outerHeight();

  if (!safeAreaInsetTop) {
    $body.addClass('app-android-safe-area');
  }

  $div.remove();
}
body.app-ts-mobile & {
  margin-top: 20px; // fallback for no safe area support
  margin-top: constant(safe-area-inset-top); // iOS 11
  margin-top: env(safe-area-inset-top); // iOS 11.2+
}

body.app-ts-mobile.app-android-safe-area & {
  margin-top: 20px;
}

Using env(safe-area-inset-top) in SCSS with max() function


Tag : css , By : chudq7
Date : March 29 2020, 07:55 AM
hope this fix your issue If I read your question right you are referring to the css max function not the max function provided by Sass - also the example is CSS and hence need the mentioned Sass 'hack' to work in SCSS.
The first thing you need to deal with is the iOS 11.0 - 11.2 implementation using constant. The easiest way to do this is to assign the safe-area-inset to CSS variables.
:root {
    /* ------------------------------------------------------------------- 
        Assign the default/constant/env values to CSS variables
    */
    --safe-area-inset-top   : 0px;
    --safe-area-inset-right : 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left  : 0px;  

    @supports (top: constant(safe-area-inset-top)){
        --safe-area-inset-top   : constant(safe-area-inset-top);
        --safe-area-inset-right : constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left  : constant(safe-area-inset-left);          
    }

    @supports (top: env(safe-area-inset-top)){
        --safe-area-inset-top   : env(safe-area-inset-top);
        --safe-area-inset-right : env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left  : env(safe-area-inset-left);            
    }          
}


@supports(padding: max(0px)) {
    .post {
        /* -------------------------------------------------------------------   
           Use the CSS variables in the max function   
        */
        padding-left:  max(12px, var(--safe-area-inset-left));
        padding-right: max(12px, var(--safe-area-inset-right));
    }
}
Related Posts Related QUESTIONS :
  • 'NSApp' is unavailable in UIKit for Mac: How to embed Mac only framework in iOS app on macOS?
  • UserDefaults Binding with Toggle in SwiftUI
  • How to create a color with an alpha value using SwiftUI?
  • SwiftUI creates destination views before the user navigates to them
  • Streaming video from https with AVPlayer causes initial delay
  • Tap Action not working when Color is clear SwiftUI
  • SwiftUI NavigationButton: How to navigate to different destinations
  • Supported default light/dark mode colors for Color vs UIColor
  • XCUITest wait for a cell with a specific static text inside it
  • Not able to enable Development mode on iOS 13
  • How to hide the home indicator with SwiftUI?
  • How to write if condition with using label text (Int) values
  • Swift Cannot use instance member within property initializer
  • Issue while getting the frame of the keyboard
  • dynamicMemberLoookup ExpressibleByStringLiteral parameter swift
  • iOS Unity Firebase Messenger Xcode Compile Error: FIRDynamicLinks
  • Firebase Storage Image Cache not updating SWIFT
  • unhandled js exception: application main has not been registered expo TestFlight
  • App freezes on IOS when navigate to another screen - React Navigation
  • How to create haptic feedback for a Button in SwiftUI?
  • How can I achieve automatic scrolling in my text view when text comes down to the keyboard level in Swift?
  • how to get the location with the CLLocationManager every 10 secondes?
  • Calling completion handler of a function from Timer selector function Swift
  • How to make SwiftUI view fullscreen?
  • RAM, JSC, Views, UI and JS usage table appearing whenever I launch my react native app. How to remove this table?
  • Change status bar background color using UIStatusBarManager
  • Should we make tapGesture component an IBAction or IBOutlet to capture the tap event?
  • Iframe automatically goes full screen using Ionic 3.9.2 on iOS
  • How to calculate score out of 1000 given some seconds (In Double)
  • How to calculate time (minutes) between two dates in swift?
  • There was problem loading requested app.it looks like you may be using LAN URL
  • Swift circular corners doesn't work properly on different screen sizes
  • How change .navigationBarTitle font in SwiftUI?
  • What happens if `MPSCNNConvolutionDataSource` protocol's `load` method return false?
  • Why does the UIBarButtonItem not show up when I create it with code?
  • How to prevent following view controller inheriting navigation view controller bar?
  • What does it mean when .xcodeproj files are shown in red in Xcode?
  • Xcode SwiftUI how to scroll the Preview Canvas?
  • Expand tableview and increase scrollview content size by an appropriate difference on clicking a button inside a table c
  • xcodebuild failed with return code: 65 - using CLI/Appcenter but no error messages
  • "'isDeveloperModeEnabled' is deprecated: This no longer needs to be set during development. " What is isDevelo
  • Right click in UIKit for Mac
  • How we Support Dark Mode in Current iOS App with iOS 13?
  • Security vulnerablility issue in ios mobile app
  • How to set a background color for the viewController in swiftUI?
  • SwiftUI : Segue navigation
  • iOS 13 Custom UISearchBar _searchField crash
  • USDZ models have holes in SceneKit but not QuickLook
  • Why does iOS Password Autofill not prompt to save password on keychain?
  • Pushing information to firebase after event is created(Firebase-Realtime-Database)
  • Xcode 11 Beta and Carthage bootstrap
  • How to change the status bar background color and text color on iOS 13?
  • Using Core Data with SwiftUI
  • How should I do to wait all the data downloaded completely and show on TableView?
  • Can we specify the number of rows that can be shown in each section of a collection view
  • Why sometimes completion handler not called?
  • Protocol 'View' can only be used as a generic constraint because it has Self or associated type requirements
  • In UIKit we can set label.numberOfLines = 0 when we do not know how many lines the text will take? What is the alternati
  • Swift ISO8601 format to Date returning fatal error
  • SwiftUI Login Page Layout
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com