Responsive design: How to open links in a modal window for desktop browsers, but not on a mobile device?
I have some links that I want to open in a modal window for desktop users, but not in a modal window for mobile users (modal window initiated via CSS classes and jQuery event listeners). The site is running a responsive theme using media queries, so I'm trying to figure out how to handle different behavior for different screen sizes (making assumptions about the type of device being used in each screen size).
I have it set up right now with 2 distinct links. Only 1 of those links is shown per screen size, and I make the assumption that larger screen sizes will utilize the modal window link. When the media query returns a smaller size, I hide the modal window link and show a standard link to the desired page.
Seems like there must be a better way to do this. Any ideas?
If I understood correctly, you need an anchor to do different things depending on the screen size (another way to detect mobile and avoid just small windows in desktop is to do a media query based on size AND pixel ratio).
The problem I see with this approach is (assuming you have both options and just show/hide the correct one based on css media queries) that you are repeating content in the code, which is not very good for accessibility.
Why not do it through jquery? You can detect the viewport size and give the link the adequate functionality. For example, you have your default link with no particular action other than redirecting to a new address. BUT if the viewport is bigger than x, you write the content of the link to be different (add a class to open the modal or so).