Dynamic redirection with CSS or SASS

Asked

Viewed 168 times

1

I have a website, and I’m working on responsiveness on it. I have a mobile version, similar to a web app, in a specific directory within the project. Currently when the screen resolution is less than 768px, it automatically redirects to the mobile site. Until then perfect, but when I reduce the browser window it does not redirect unless I update the page, because what it redirects is a Jquery script that checks when the page is loaded what the resolution is.

The problem is that I need to check all the time so that I can redirect when the screen is smaller and already rendered. I thought about putting a media query for resolutions at least 768 wide, but I couldn’t find how to redirect from css itself, or call some script when this query is activated.

Also accepted as a solution some Jquery event triggered when the width is

jquery css web-application sass

  • Because it does not check with the event resize of jquery? Puts the function inside it and whenever there is a change in window size the event will be called.

  • Can you give me an example of this event?

2 answers

1

The correct is you treat the resolutions with CSS and not Jquery or JS, using Responsive Design, The media queries are very used to solve this type of situation, even do not need to have 2 folder a desktop other mobile just control the screen resolutions, follow example:

h1 {
  font-size: 3.0rem;
  color: red;
}

@media screen and (max-width: 990px) {
  h1 {
    font-size: 1.0rem;
    color: blue;
  }
}
<h1>Título</h1>

  • Samuel, I don’t think you understand the question. He wants when the screen is less than 768px the user is directed to another page and not change the CSS of the page he is already on.

  • I use media queries for various things on my site, but the mobile version is different structure, so I have another directory, organized different in mobile version.

1

CSS does not have the ability to redirect to another page, but you can use media queries in Javascript with matchMedia.

const handler = ({ matches }) => {
  if (matches)
    window.location = 'URL do seu site mobile'
}

const media = window.matchMedia('(max-width: 767px)')
media.addListener(handler)
handler(media)

References:

Browser other questions tagged jquery css web-application sass

You are not signed in. Login or sign up in order to post.