Detecting which browser

Beta Testing HTML5
#1

I am using html5 for a simple game. It appears some teachers will work with me to customize the content for their classes. HTML5 works well enough for this, all fine.

One issue I have had with html5 is that button labels are always offset vertically by about 8 px. I correct for this by putting the label separate from the button, offset by 8 px. That all works fine for Chrome, Firefox, Brave. But for Safari, there is no offset, so now my ‘corrected’ offset is too low.

Is there a way to detect if the app is running in Safari? I have been through all the system.getInfo, but I cannot get any help there, and ‘userAgent’ and ‘user_agent’ do not return anything.

#2

I think JavaScript solves it

Attached is the code

you can detect other browsers as well by copying the commented code to replace the one for Safari
getBrowser.zip (70.5 KB)

you can see the print results by running index-debug.html instead of index.html … in your code you can run if statements based on the returned true or false value

1 Like
#3

Thank you, that is excellent, a great help. I see how I can do any of the browsers as well.

#4

Glad to help…

Please keep in mind that for each browser the code might change depending on browser version
for example the original code i downloaded didn’t detect chrome… i had to download an updated line of java script for chrome ( all from stack overflow) … same goes for other browsers … so please test them and update code if necessary

1 Like
#5

Sorry for dumb question, but how do I view the output (e.g. in chrome?). I couldn’t find the index.html you mentioned in the script, and I can’t see any relevant output in the console tab of the chrome developers tools…?

#6

not a dumb question at all…
When you build a HTML project it gives you a folder with multiple files … 2 of them are index.html and index-deubg.html

When you run the URL for your project let’s say in Windows in www root folder which is the localhost like:

http://localhost/YourProjectFolderName

IIS detects default files to run like default.aspx and index.html
so you have to manually type in your URL the following address

http://localhost/YourProjectFolderName/index-deubg.html

It will run your project and if you scroll down the browser you will see the console window which will show your print statements

Untitled
Untitled1920×1080 126 KB

#7

Thanks for help,.but I’m still a bit lost. When I build for html5 from the simulator it gives me the option to open in browswer, which never works (I’m on a windows PC and use chrome mostly). So I zip the build folder and upload to itch.io and test it there. I am not quite sure how to use http://localhost which I think requires me to set up a local server…

#8

Yes in general to run any web application you need a webserver and depending on the platform you need certain setup for each server
So if your language is Java or PHP or .NET or Solar2D then you always need a different setup

The same setup also differs on Windows, Linux, Apple … etc.
You can for example run PHP, Java, .NET, Solar2D on Windows, but you need to dive in into how to set it up for each language.

For Windows, you can use IIS technology, if not installed you have to add it from Add Remove Windows Components

once added windows will create a folder called inetpub in drive C, and inside it your www root folder where you have to copy the folder generated by Solar2D ( If you open it in explorer not in browser you will see that folder)

Finally for Solar2D projects all you need to do is add something called MIME type for .data extension if not added, you can find it on Solar2D website, this will make IIS understand Solar2D files

Then run any browser on your pc, and type the URL and it will run

I know this sounds a bit complicated but this is a standard.

itch.io is acting as your webserver (IIS or whatever web server you have) that’s why you don’t have to do anything, just copy paste and run … an online webserver will allow everyone to access your portal

I’m using MyAsp.net hosting instead of itch.io

But for my local testing i Have IIS and i can run my websites locally but of course no one can access them

#9

Thanks for your help. I managed to set up IIS and now the local host works andI can run getBrowser and I can view the print output via index-debug.html . With some help from chatgpt I think this modifed jsurlparameter_js.js script now prints the browswer name (rather than return true or false for different options), but I have only tested it on chrome so far:

jsurlparameter_js = {
get: function () {
var userAgent = navigator.userAgent;
var vendor = navigator.vendor;
// Safari detection
var isSafari = /constructor/i.test(window.HTMLElement) ||
(function (p) { return p.toString() === “[object SafariRemoteNotification]”; })
(!window[‘safari’] || (typeof safari !== ‘undefined’ && window[‘safari’].pushNotification));
// Chrome detection
var isChrome = /Chrome/.test(userAgent) && /Google Inc/.test(vendor);
// Opera detection
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || userAgent.indexOf(’ OPR/’) >= 0;
// Firefox detection
var isFirefox = typeof InstallTrigger !== ‘undefined’;
// Internet Explorer detection
var isIE = /@cc_on!@/false || !!document.documentMode;
// Edge detection
var isEdge = !isIE && !!window.StyleMedia;
// Edge Chromium detection
var isEdgeChromium = isChrome && userAgent.indexOf(“Edg”) != -1;
// Return browser type
if (isSafari) return “Safari”;
if (isChrome && !isEdgeChromium) return “Chrome”;
if (isOpera) return “Opera”;
if (isFirefox) return “Firefox”;
if (isIE) return “Internet Explorer”;
if (isEdgeChromium) return “Edge Chromium”;
if (isEdge) return “Edge”;
return “Unknown Browser”;
}
}