How do I ensure that my app only renders on a minimum screen width of 1300 pixels. Anything less than that should redirect the user to a fixed web page, something like a 404. This is a React app and I'm using a standard root div to render components inside a index.html.
2 Answers
if you are using reactjs, you can try this out.
window.addEventListener('load', () => {
const width = screen.width;
if (width > 1300) {
render((
<SomeComponent />
), document.getElementById('root'));
}
else {
render((
<div>404 not found </div>
), document.getElementById('root'));
}
});
2 Comments
jkris
Can this be modified to redirect the user to another page?
duwalanise
I haven't tried it but i think
window.location.replace("http://stackoverflow.com"); in the else part will work as suggested by Alfred XingYou can check the screen width on load (either in your root component's constructor or componentDidMount, then redirect them if it's less than 1300:
var width = screen.width;
if (width < 1300) window.location.replace("http://stackoverflow.com");