Detect current screen breakpoint - javascript

I am using Material UI to build my user interface for the web. I have a question regarding material UI if it provides a way to detect the current screen resolution breakpoint, ex: [xs, sm, md, lg, xl] or [0px, 600px, 900px, 1200px, 1536px] in a way that I can read it.
For instance, I wanted to use the useEffect() for cleaning a state in my component, but I needed that to be when the component hides because of a screen resolution change, so maybe I can do it like:
useEffect(()=> setMenuList(null), [mui.currentScreenResolution] )
In other words, in case the current screen breakpoints changed from 'xs' to 'md', I want this useEffect hook to run.
Does MUI provide a way to read the currently used breakpoint by the app?
Update:
Just to confirm my question; I don't want to detect every time the window size of the browser changes, I only want to detect when the screen resolution changes from one of the predefined screen resolution breakpoints by mui from one to another (ex: xs → md).

Related

React native change orientation

Hi i'm new to learning react native, anyway i'm making an app with two screens, the thing is i wanna the first screen stay in portrait orientation but not the second screen. I want the second screen turn to landscape mode when i switch the app to that screen. Is there any simple way to do that.

Detect browser keyboard IME feature

The problem: I'm working hard to implement a responsive UI in my app. But the keyboard IME on Android squishes my entire page layout into a frame that's about 96 pixels high when in landscape orientation. Typically this means that the input control being edited is not visible in the space above the IME. And one cannot edit a value that's not visible in Chromium. I'm assuming iOS has the same problem.
Setting a minimum height for the page helps. But the Chromium scroll-into-view implementation is not robust enough to keep up with some of the more complex page rewrites that are triggered by a change in window size in my app.
Ideally, I'd like to run the keyboard IME in "extract" mode, where the page is entirely hidden, and only the value being edited is displayed in the space above the IME. But as far as I can tell, there's no way to do that, even in Android native apps. Chromium never runs the keyboard IME in "extract" mode, even in landscape orientation.
The solution I'm current implementing: simulate "extract" IME mode by perform editing of values in a full-screen dialog that contains nothing but a single dedicated <input>.
The question is: how should I detect when to use this solution. it's easy enough to check the browser's navigator.userAgent. The Mozilla foundation recommends checking for /Mobi|Android/ (although I've seen solutions that have 40 or 50 patterns). But I'm wondering whether there's a feature-driven way to check for this instead -- something more along the lines of if ("geolocation" in navigator) ....
But as far as I can tell, there are no features related to whether and how a keyboard IME will change the layout of a page. If there are, I'd like to know. The "feature" I'm looking for is something along the lines of "Will this browser lay out my entire page in a frame that's 96 pixels high (in landscape) whenever an input control gets focus". But "does this browser uses a keyboard IME" would be satisfactory.
Any ideas appreciated.

Rotate 1 screen in React native (both ios and android)

I'm coding an application React-Native in which i need one screen to be locked on landscape (without any action from the user), how can i do this ?
I tried the "transform" props but couldn't manage to make it works
In Android :
Navigate to the AndroidManifest.xml file. the path is android/app/src/main and set android:screenOrientation to the landscape.
In iOS:
Open iOS folder of your project with Xcode. In general tab, find device orientation and set it to landscape left or right.
The abovementioned is ok to change the orientation of all the screens. if you need to change one particular page only, you can use this library.

Shrinking HTML content without viewport

We have a web based LOB application and currently we are shrinking the content of the app when it goes onto a smaller resolution browser i.e. IPad, using the viewport. using javascript:
document.querySelector("meta[name=viewport]").setAttribute(
'content',
'width=device-width, initial-scale=0.8');
This works fine asthecially but it seems to produce a performance hit when the browser has to scale everything down, especially with our kendo controls (the grid takes a massive hit).
Just wondering if anyone can advice a better was to scale down the viewport without hitting any performance issues?
I'd be surprised if you're getting a performance hit from scaling the page since that happens on the GPU and is expected to be very fast.
Additionally, your viewport descriptor as-is wont scale the page unless you have content that's explicitly wider than your layout size (for example, a very wide image). The browser will automatically zoom out to show all the content on load so your best bet is to pick a good layout width for your page (e.g. width=1200) and not set an initial-scale. width=device-width will attempt to lay your page out into the size of the device's screen, which is not what you want if you're trying to scale your page down.

Disable resizing snap view in Windows 8.1

I'm working with a Windows 8 app using Java Script.
In windows 8 there is only one snap view and that is fixed one. But when we come to the windows 8.1 we can resize the snap view. I want to do is keep that fixed size snap view in windows 8.1 also. That means, I want to stop resizing snap view when my windows 8 app running on windows 8.1..
Is there any way for it...?
Looking for example or any guide... Thank you
#dougajmcdonald is correct. The user is in control and will be able to resize any app to most any size, so your app will need to account for it. You can change the minimum size of your app which gives Windows a hint about where to give the user a snap point. For instance, if you say your app's minimum size is 500px then when the user is dragging the separator, it will snap to 500 pixels, but it will still allow them to resize to say 587 pixels.
I don't believe you can stop it, as it's a part of the OS and apps are supposed to adhere to it.
You can control your app via media queries in the CSS to fix size to particular values when the app width is at certain values.
Or you can detect the application state and look for 'snapped' and set sizes in the JS code perhaps.
EDIT:
In order to use CSS which applies to the application in snapped mode you can find good examples in the MS Template applications, taken from their CSS you can use:
#media screen and (-ms-view-state: snapped) { // my styles }
Which will allow you to apply specific styles in the snapped state.

Categories