iwato Posted May 18, 2018 Share Posted May 18, 2018 The DILEMMA: Recently I discovered how to enable responsive design on my website's main page. Although the page itself is now responsive, the splash panels that are associated with it are largely dysfunctional. Having experimented in various ways to make these latter responsive as well, I have decided to simply eliminate them on mobile devices. What is the best way to do this? Already I have combined PHP and Javascript to suppress the splash panels in the same session. So, my question is what is the best way to recognize any mobile device? Roddy Link to comment Share on other sites More sharing options...
justsomeguy Posted May 18, 2018 Share Posted May 18, 2018 In general, it's common to use CSS media rules to hide or show things based on something like screen resolution. Link to comment Share on other sites More sharing options...
iwato Posted May 18, 2018 Author Share Posted May 18, 2018 OK. I do not worry about the nature of the device, only the screen resolution, but how do I obtain the screen resolution? From the $_SERVER variable. I could surely obtain it from Matomo, but I do not wish to make the actual functioning of my site dependent on Matomo for anything that is not directly related to Matomo. Mind you, Colorbox is Javascript, and the contents of my splash panels are spread across many webpages. It is a complex design that is repeated many times. Unless Javascript can be triggered by an @media rule I have no idea how I would go from CSS to disabling Colorbox. Roddy Link to comment Share on other sites More sharing options...
justsomeguy Posted May 18, 2018 Share Posted May 18, 2018 First, I have no idea what Colorbox is supposed to be, I'm just talking in general here. If you look up CSS media queries you'll see that you specify things like a min-width or max-width in the rules, and then the browser will apply the rules that match. So, for example, you can say that if the screen is too small, then certain HTML elements should be hidden. If you want to also do similar things in Javascript that's fine, there are multiple ways to get the browser dimensions in Javascript. This information is not available in PHP, through $_SERVER or anywhere else, because PHP is not running in the web browser, it's running on the web server. It has no information about the client device other than what was sent in the HTTP headers. For what it's worth, I've also never looked into Matomo, I don't know what it does or what it's used for. I'm talking about general techniques here that you can apply to any situation, not things dependent on any particular plugin or piece of software that you're using on your site. CSS media queries are a general technique, in fact they are a major way to implement responsive design (where the page layout - i.e. CSS rules - change depending on the page size). 1 Link to comment Share on other sites More sharing options...
iwato Posted May 19, 2018 Author Share Posted May 19, 2018 Yes, I will do it with jQuery. I found these two rather simple jQuery methods: $(window).width() and $(window).height(). According to the jQuery manual, however these methods do not account for zoom effects. This suggests that the user could made the window much larger than the viewport and deceive my code into believing that the viewport is bigger than it is. Do you have a suggestion to get around this problem? Roddy Link to comment Share on other sites More sharing options...
justsomeguy Posted May 21, 2018 Share Posted May 21, 2018 There are properties like window.outerHeight, window.outerWidth, screen.width, screen.height, etc, but I don't know how any of them report zoom. If someone wants to screw up their display and break responsive layouts, I choose to let them. That's not a battle I'm interested in fighting. Link to comment Share on other sites More sharing options...
iwato Posted May 22, 2018 Author Share Posted May 22, 2018 With the exception of the American public, not everyone is intentionally stupid. I try not to punish people for their ignorance. Nature will do that on its own accord. In any case, it appears that I have resolved the need for zoom by setting the minimum width of the acceptable viewport to wider than the height of the viewport of the smallest smartphone. This pretty much insures that enough of the splash panel will be made visible so that it can be easily eliminated, if it gets in the way. Roddy Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now