Can Abyss block access from all mobile devices?

JMMotyer

Hello, all,
I have a few Abyss hosts that I would like to prevent (block) access to, from all mobile devices. I wish them to be accessible only from desktop browsers.
Ideally, when Abyss blocks them, it would be nice if Abyss can show them a "Not Supported" Page, which displays a message that informs those mobile users that the website is not supported on their device, and for them to instead use a desktop browser with a width resolution of at least 1600px.
Is Abyss capable of doing the above, possibly by using rewrite rules, or some other method?
Thanks in advance & have a great day.
Regards,
John

tfh

JMMotyer wrote
Hello, all,
I have a few Abyss hosts that I would like to prevent (block) access to, from all mobile devices. I wish them to be accessible only from desktop browsers.
Ideally, when Abyss blocks them, it would be nice if Abyss can show them a "Not Supported" Page, which displays a message that informs those mobile users that the website is not supported on their device, and for them to instead use a desktop browser with a width resolution of at least 1600px.
Is Abyss capable of doing the above, possibly by using rewrite rules, or some other method?
Thanks in advance & have a great day.
Regards,
John

Isn't it easier to make the site reponsive, or just check in html what the display size is and then display that message?

JMMotyer

tfh wrote
Isn't it easier to make the site reponsive, or just check in html what the display size is and then display that message?

Thanks for your feedback, TFH.
Actually, my site is already responsive, and works quite well when switching to monitors with different resolutions.
However, I have designed some pages for displaying at a width of 1920px, with their page layouts getting messed-up when the resolution goes much below 1920.
Case in point is THIS page, which displays perfectly at a width of 1920. But when I display that same page on my other monitor that has a screen width of only 1680, some of the items do not display.
There are 2 things that I wish to be able to do:

1. block all access to that site from mobile devices (i.e. tablets & phones); and
2. block all access to that site if the visitor's monitor is not at least a certain width (i.e. 1920px).

I am going to be contacting the developer of my photo gallery script regarding item 2, to see if I am able to have the script block access to that gallery if the visitor's screen width is below a certain size, with the visitor being notified why they are unable to display the gallery.
I was hoping that Abyss would be able to handle item 1, by blocking access from all mobile devices. If Abyss cannot, then I will ask the developer of my photo gallery script regarding item 1 as well.
I hope that the above makes sense.
Thank in advance & have a great day.
Regards,
John

pkSML

It looks like you're using jQuery, so you can save this code as a JS file, e.g. browser_width.js. Then call it in your pages with

<script src="/path/to/browser_width.js"></script>

$(document).ready(function() {
	// This function will be called when the DOM is fully loaded.
	checkPageWidth();

// Attach a resize event listener to the window.
	$(window).on('resize', function() {
		// This function will be called every time the window is resized.
		checkPageWidth();
	});

function checkPageWidth() {
		var windowWidth = $(window).width(); // Get the current width of the browser window.

// You can add your logic here based on the windowWidth.
		if (windowWidth < 1920) {

// Perform actions for smaller screens.
			$('.sb-site-container').css('display', 'none');

$('#width_error_msg').remove();

// Create div element for error message
			var newDiv = $("<div id='width_error_msg' style="text-align: center; margin-top: 50px;"><h2>Sorry. Your screen is too small. This site is only properly viewable with screen widths of 1920px or greater.</h2></div>");

// Insert the new div before the target element(s)
			newDiv.insertBefore('.sb-site-container');

} else if (windowWidth >= 1920) {

$('#width_error_msg').remove();

// Perform actions for larger screens.
			$('.sb-site-container').css('display', 'block');
		}
	}
});

PS I haven't tested this, but it should do what you need.
PS #2: If you want to, you can redirect to an error page instead, but this will redirect anybody if the size of their browser window is too small, which isn't ideal.

      if (windowWidth < 1920) {
            window.location.href = 'https://www.example.com/error_page.htm';
      }

JMMotyer

pkSML wrote
It looks like you're using jQuery, so you can save this code as a JS file, e.g. browser_width.js. Then call it in your pages with...

Hey there, pkSML, thanks for the suggestion.
I copied & pasted your code into a new .js file, and then called it from my photo gallery, but the page now shows:

","context":{"items":"description,content","width":"width-default"},"folders":{"grid":{"columns":"5,5,1"},"width":"wide","sortby":"name","items":"title,preview,amount,description,date,folders_amount"},"type":"page","id":"p722cf5","permalink":"/galleries/bases/Cornwallis/","canonical":"https://www.aurorawings.me/galleries/bases/Cornwallis/","file_path":"/content/galleries/bases/Cornwallis","preview_image_full":"https://www.aurorawings.me/content/galleries/bases/Cornwallis/Cornwallis~MainGate~88080366_2543255759224252_6281891429954355200_n (Gerry Giberson)~auto~cropped~preview.png"}; function jsFail(){ var s = document.createElement('script'); s.type = 'text/javascript'; s.onload = imagevue_; s.src = '/app/public/js/3.34.2/x3.min.js'; document.getElementsByTagName('head')[0].appendChild(s); }

...and then I have a circle continuously rotating, with nothing else on the page showing (except Google reCAPTCHA at the bottom of the page.
But now that I think about it, that problem/error could be caused by the photo gallery script itself. That script requires an .htaccess file to run, which of course Abyss doesn't use or support, so the Aprelium developers came up with a nifty fix that allows me to run the photo gallery by using Abyss rewrite rules :-). Let me check to see if I get that same error with one of my sites that does not use that photo gallery.
I have since temporarily removed the call to that script, but I can temporarily create a test gallery for you, in case you wish to check the problem with developer tools.
Thanks or taking the interest & time to think of a solution, it is greatly appreciated.
Regards,
John

pkSML

That's really bizarre. I tested it locally in dev tools and it worked perfectly on your page.
If you load up the page, you can add this line in your dev tools console:

let width_script = document.createElement('script'); width_script.src = 'https://litlurl.net/dev/browser_width.js'; document.body.appendChild(width_script);

I don't know if it matters, but I'm adding the script just before </body> with this snippet.
Edit: fixed the variable name in the snippet.
PS I'm noticing the breakpoint isn't occurring at exactly 1920 pixels like it should. I would adjust the number in the script to 1910 or even 1900.

JMMotyer

That's really bizarre. I tested it locally in dev tools and it worked perfectly on your page.

That's most-likely because I removed the script from that page, so for now the page could load successfully :-).
I have another page (on another site HERE) that is simply an HTML file, that I've added your script to, as well as another script that displays the screen resolution of the monitor that the page is being viewed on.

I don't know if it matters, but I'm adding the script just before </body> with this snippet.

That's where I placed your code in the above test site also, right before my </body>. But when I move that test page to my second monitor (which is only 1680x1050), the page displays properly, even though its resolution is much less than 1920.

Edit: fixed the variable name in the snippet.

Not sure what you mean by that.
Thanks again for your help.

pkSML

I checked the link you sent, and the javascript file is returning a 403 error (forbidden): https://tng.nitrowings.me/common/_js/browser_width.js
Also, the script I posted was tailored to the page it was for. Thus, it won't work properly on any particular page. My script targets the <div class="sb-site-container"> element on the page. This can obviously be changed by changing the jQuery selector.
In other words, this javascript is hiding the <div> that has the sb-site-container class added to it (really, any # of divs with that class). And the error message is going to be placed just above the div with that class.
So... when using this script on another page... if there isn't a div with the sb-site-container class on the page, this script will effectively do nothing.

JMMotyer

I checked the link you sent, and the javascript file is returning a 403 error (forbidden): https://tng.nitrowings.me/common/_js/browser_width.js

I was baffled as to how & why the file was called from that domain, until I realized that that was the domain I was initially testing it on, and only I have access to that test Abyss host. My bad. Apologies.
I have since changed the call to that file, by instead using:

<script src="https://<?php echo $_SERVER['SERVER_NAME'];?>/common/_js/browser_width.js"></script>

Also, the script I posted was tailored to the page it was for. Thus, it won't work properly on any particular page. My script targets the <div class="sb-site-container"> element on the page.

Thanks for mentioning that. At quick glance, I believe that the <div class="sb-site-container"> is used on all my photo gallery sites, for all the galleries; if that's indeed the case, I think that maybe it should work.
But the way that I was calling your Javascript code was not the correct way to call it, it seems. I have since placed it & named it the way that is recommended by that photo-gallery script, and have asked in their forums the proper way to call it, as I'm not supposed to use <script></script>.
Will let you know how I make out.
Thanks again for your time & help.
Regards,
John

pkSML

You're getting closer...
The javascript file is being loaded into the page. Unfortunately, it relies on jquery, but it's being loaded before jquery is. Thus, the browser doesn't know what to do with the code.
If you can change the order of the script to after jquery loads, you should be in business.

JMMotyer

The javascript file is being loaded into the page. Unfortunately, it relies on jquery, but it's being loaded before jquery is. Thus, the browser doesn't know what to do with the code.
If you can change the order of the script to after jquery loads, you should be in business.

I can see, in Developer Tools, where it is being called. Thanks. I will need to contact the developer on my photo gallery script, and ask him if I can somehow get it to load before anything else.
Also, I noticed the following... I don't know if it means anything to you, in particular the middle one:

Will contact the developer now.

JMMotyer

Stephen, just to confirm, your Javascript file can be called from anywhere on that site, as long as that call is BEFORE the line that contains ".sb-site-container"?
Or does it need to be immediately before the line that contains ".sb-site-container"?
Or does it need to be at the very top?
I just need to know what to ask the developer.
Thanks in advance.

JMMotyer

Getting there...
I pasted your Javascript code directly into a test gallery, and your script is working... but not correctly.
My monitor's width is 1920, but even with both values in the script lowered to 1900, the page is blocked by your script, with the error message showing.
Also, my browser's back-button doesn't work (nothing happens), so I created a button for the user to click on, to take them to the home page, but nothing happens either when it is clicked on.
That test page is HERE.