Jump to content

Disable $.colorbox for Mobile Devices


iwato

Recommended Posts

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

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

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).

  • Thanks 1
Link to comment
Share on other sites

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...