I'm using a png with transparency as a background image, which displays fine everywhere - except in the Chromium based Version of MS Edge. I've updated MS Edge to the newest version, tested the website with the unaltered Chromium version and on different machines - the problem persists and is only occuring on the Chromium based MS Edge.
So the only workaround would be to disable the background image for MS Edge - in order to do that I would need the possibility to discern between the Chrome Browser and the Chromium based MS Edge Browser. So far I couldn't find any viable solution.
Does anyone have an idea how to target only the Chromium based MS Edge or more generally the MS Edge browser including version 79 and up?
As of now I dont care if this is achieved via CSS or JS, but would prefer a CSS selector.
thanks in advance.
Since the new version of MS Edge is chromium, if we use the CSS method to detect the browser, the style might be also apply for the Chrome browser.
If you want to target only the Chromium Based MS Edge, I suggest you could use JS method, please check the following code:
<script>
var browser = (function (agent) {
switch (true) {
case agent.indexOf("edge") > -1: return "edge";
case agent.indexOf("edg") > -1: return "chromium based edge";
case agent.indexOf("opr") > -1 && !!window.opr: return "opera";
case agent.indexOf("chrome") > -1 && !!window.chrome: return "chrome";
case agent.indexOf("trident") > -1: return "ie";
case agent.indexOf("firefox") > -1: return "firefox";
case agent.indexOf("safari") > -1: return "safari";
default: return "other";
}
})(window.navigator.userAgent.toLowerCase());
document.body.innerHTML = window.navigator.userAgent.toLowerCase() + "<br>" + browser;
</script>
The new Microsoft Edge browser userAgent property as below (the userAgent contains "edg/" value):
mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/80.0.3987.149 safari/537.36 edg/80.0.361.69
Related
Chrome DevTools has the option to use the device emulation mode.
I know there's a way to test whether the mode is on or not. But I'd like to know when it's being activated or deactivated, on click.
Are there any events I could listen to, fired by the browser, that indicate the mode was turned on or off?
I ended up doing this:
$(window).on('orientationchange', function(e) {
if (e.tagret && e.target.devicePixelRatio > 1) {
// Emulation mode activated
} else {
// Emulation mode deactivated
}
});
Works for Google Chrome (my version: 58.0). Is it the bulletproof way? Not sure. It's enough for my needs, though.
orientationchange docs here.
My solution:
$(window).on('orientationchange', function(e) {
setTimeout(function() {
var emulationModeActivated = window.navigator.userAgent.indexOf('Mobile') !== -1;
}, 0);
});
Chrome adds Mobile to userAgent in device emulation mode, for example "Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) CriOS/56.0.2924.75 Mobile/14E5239e Safari/602.1"
e.target.devicePixelRatio isn't usable on Mac with Retina Display as value is always > 1
does anyone know how to check if IE 11 compatibility mode is ON when I'm on a website through javascript?
I added the url to the list compatibility view settings. But when I do
navigator.userAgent
in developer tools, it returns
Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; .NET4.0E; .NET4.0C;
.NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729;
InfoPath.3; rv:11.0) like Gecko
Looking at the microsoft website (http://msdn.microsoft.com/en-us/library/ie/hh869301(v=vs.85).aspx), it says
The compatible ("compatible") and browser ("MSIE") tokens have been
removed.
Any help on detecting whether a page is using compatibility view via javascript would be really helpful. Thanks in advance.
SOLVED
While searching for an answer to this question myself, I found this solution from Nenad Bulatovic in another thread but his response wasn't marked as the correct answer. I tested this out in IE11 and downgrading to IE5 and found that it works for IE7-IE11, which is great. I wanted to share it here in case anyone else finds it useful.
iecheck.js
function trueOrFalse() {
return true;
}
function IeVersion() {
//Set defaults
var value = {
IsIE: false,
TrueVersion: 0,
ActingVersion: 0,
CompatibilityMode: false
};
//Try to find the Trident version number
var trident = navigator.userAgent.match(/Trident\/(\d+)/);
if (trident) {
value.IsIE = true;
//Convert from the Trident version number to the IE version number
value.TrueVersion = parseInt(trident[1], 10) + 4;
}
//Try to find the MSIE number
var msie = navigator.userAgent.match(/MSIE (\d+)/);
if (msie) {
value.IsIE = true;
//Find the IE version number from the user agent string
value.ActingVersion = parseInt(msie[1]);
} else {
//Must be IE 11 in "edge" mode
value.ActingVersion = value.TrueVersion;
}
//If we have both a Trident and MSIE version number, see if they're different
if (value.IsIE && value.TrueVersion > 0 && value.ActingVersion > 0) {
//In compatibility mode if the trident number doesn't match up with the MSIE number
value.CompatibilityMode = value.TrueVersion != value.ActingVersion;
}
return value;
}
iecheck.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing IE Compatibility Mode</title>
<script src="iecheck.js" type="text/javascript"></script>
</head>
<body>
<div id="results">Results: </div>
</br>
<script type="text/javascript">
var ie = IeVersion();
document.write("IsIE: " + ie.IsIE + "</br>");
document.write("TrueVersion: " + ie.TrueVersion + "</br>");
document.write("ActingVersion: " + ie.ActingVersion + "</br>");
document.write("CompatibilityMode: " + ie.CompatibilityMode + "</br>");
</script>
</body>
</html>
source: Detect IE10 compatibility mode
I wrote a JavaScript function, ie-truth, to do just this. How it works is that in IE 11 if compatibility mode is turned on, the User Agent string will contain the Trident version number for IE 11 (7.0) as well as the MSIE version number for an older version of IE (such as 7.0 for IE 7). This also applies to compatibility mode in older versions of IE.
Add this to web.config file and application will overwrite user's setting.
<configuration>
...
<system.webServer>
...
<httpProtocol>
<customHeaders>
<clear/>
<add name="X-UA-Compatible" value="IE=8; IE=9; IE=EDGE" />
</customHeaders>
</httpProtocol>
...
</system.webServer>
...
</configuration>
Place the "system.webServer" tag at the end of your web.config file just before the closing "configuration" tag. Additionally, you can add the X-UA-Compatible tag in IIS on your webserver by selecting your website and clicking on the HTTP Response Headers icon.
A reliable solution you can edit that works for Internet Explorer 8 to 11 (needs extra code to support < IE8).
Nasty side-effects (only if IE < 11 or documentMode < 11 -- ouch):
This will cause problems with //# sourceMappingURL=xx.js (e.g. in jQuery < 1.11, or other libraries that haven't updated to the newer //# format).
Apparently #cc_on dramatically slows down js evaluation (re Paul Irish who knows his stuff).
The basic reason it works is that:
var ieRealVersion = Function('return /*#cc_on #_jscript_version#*/;')();
returns the real version of IE regardless of compatibility mode. Notes:
ieRealVersion is undefined for IE11 in IE11 mode, but document.documentMode == 11 in that case.
ieRealVersion is 5.8 for IE8.
ieRealVersion is 5.7 for IE7, and also 5.7 for IE6 SP3. However documentMode is undefined so you need extra code to detect actual browser (fairly trivial, but I don't support IE6/7 any more, so I haven't bothered to code that).
This is a reliable way to sniff for Internet Explorer 6-10 that I have used for many years with no problems (but which has caused problems for others due to #cc_on).
I would recommend that one uses feature detection rather than indirectly querying the browser version. So, for example, if you require the HTML 5 history API feature, do something like:
if (window.history && window.history.pushState) {
console.log('This is a SUPPORTED browser');
} else {
console.log('NO! You require a browser that does X, please try installing ...');
}
Per the user agent article of the IE Compatibility Cookbook, there is a way you can tell that compat mode is enabled, but only when the user-agent string cooperates.
Specifically, if the browser token says MSIE 7.0 and the Trident token says Trident/7.0, that's a pretty clear indication. Still, the changes to the UA string since IE11 RTM show that you cannot--and should not--rely on it as a predicable resource in future versions.
To learn more about the individual tokens, see the Understanding user-agent strings topic. (It's not entirely current, but what is there seems relevant to your interests.)
Hope this helps...
-- Lance
A simple solution, try it in the console:
if (typeof(window.getSelection) == "undefined") {
alert("Unsupported browser!");
} else {
alert("Supported browser");
}
Will detect any IE less than IE9 (including compatibility view).
Would also detect Chrome 4-14 according to caniuse.
IE 6-8: Supports selection events, but not window.getSelection()
Ref: https://caniuse.com/#feat=selection-api
I'm looking for the best way to detect a webOS tablet using plain JS and if it's any easier also using jQuery. The user agent of the tablet should look something like this:
User-Agent:Mozilla/5.0 (webOS/1.3; U; en-US) AppleWebKit/532.2 (KHTML, like Gecko) Version/1.0 Safari/532.2 Desktop/1.0
So an easy way would be:
var deviceAgent = navigator.userAgent.toLowerCase();
webOS = deviceAgent.match(/(webos)/);
Is that the best way to do it already? You're likely going to say detect the feature you need to make certain is present but that won't work for me because the feature I want is present but not working as it would on any desktop, so I really just want to know is this a webOS device or not.
Update: Just found that the tablet really uses another user agent:
Mozilla/5.0 (hp-tablet; Linux; hpwOS/3.0.0; U; xx-xx) AppleWebKit/534.6 (KHTML, like Gecko) wOSBrowser/233.48 Safari/534.6 TouchPad/1.0
So the above should probably rather be:
var deviceAgent = navigator.userAgent.toLowerCase();
webOS = deviceAgent.match(/(webos|hpwos)/);
Here's a function in PHP that will detect WebOS and any other mobile device you could need. Less than 1kb in code =)
function detectMobileDevice() {
if(preg_match('/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i', $_SERVER['HTTP_USER_AGENT'])) {
return true;
}
else {
return false;
}
}
if you want to do ONLY webOS, change line 2 to:
if(preg_match('/(webos)/i', $_SERVER['HTTP_USER_AGENT'])) {
to use:
if(detectMobileDevice()) {
// If mobile device detected, do something
}
else {
// Otherwise, do something else...
}
if you need more details, visit here: http://www.justindocanto.com/scripts/detect-a-mobile-device-in-php-using-detectmobiledevice
I don't know if you can do any feature detection that'll only identify WebOS. It's WebKit-based, so all other WebKit-based platforms will have the same features. Looking at Zepto.js' source, they're doing exactly the same as you are:
ua.match(/(webOS|hpwOS)[\s\/]([\d.]+)/)
(The 2nd capture is the version)
From detect.js
I am trying to detect if the browser is Safari. If so, only then do something. In all other browsers, do something else:
if ( navigator.userAgent.toLowerCase().indexOf('safari') == -1) {
//if safari execute some function
} else {
// if other browsers execute other function
}
However, I guess I am not using the right approach because it's not working. :P
if(typeof navigator.vendor!='undefined') &&
navigator.vendor.toLowerCase().indexOf('apple')!=-1){
...
}
Quirksmode has a Browser Detection Script that you can use to detect the different browsers that are being used and then perform different actions based on that browser type.
Under the hood, it's essentially using the same technique that you are trying to use.
In your example, you actually are close. A quick fix is to just change the == to != and voila, your script should work!
However, I am running Chrome, not Safari! Yet, in my user agent string, I see the following:
"Mozilla/5.0 (X11; U; Linux i686; en-US) AppleWebKit/534.10
(KHTML, like Gecko) Chrome/8.0.552.224 Safari/534.10"
The word "Safari" appears in my userAgent String, which means that, using your script, my browser would be treated as if it were Safari!
I ended up using
var isSafari = navigator.userAgent.match(/safari/i) != null && navigator.userAgent.match(/chrome/i) == null;
if(isSafari){
// code here
}
I have an app, and I'd like to redirect the users to different pages based on where they are navigating from.
If navigating from web clip, do not redirect.
If navigating from mobile Safari, redirect to safari.aspx.
If navigating from anywhere else, redirect to unavailable.aspx
I was able to use iPhone WebApps, is there a way to detect how it was loaded? Home Screen vs Safari? to determine if the user was navigating from a web clip, but I'm having trouble determining if the user navigated from mobile Safari on an iPhone or iPod.
Here's what I have:
if (window.navigator.standalone) {
// user navigated from web clip, don't redirect
}
else if (/*logic for mobile Safari*/) {
//user navigated from mobile Safari, redirect to safari page
window.location = "safari.aspx";
}
else {
//user navigated from some other browser, redirect to unavailable page
window.location = "unavailable.aspx";
}
See https://developer.chrome.com/multidevice/user-agent#chrome_for_ios_user_agent - the user agent strings for Safari on iOS and for Chrome on iOS are inconveniently similar:
Chrome
Mozilla/5.0 (iPhone; U; CPU iPhone OS 5_1_1 like Mac OS X; en) AppleWebKit/534.46.0 (KHTML, like Gecko) CriOS/19.0.1084.60 Mobile/9B206 Safari/7534.48.3
Safari
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3
Looks like the best approach here is to first of all check for iOS as other answers have suggested and then filter on the stuff that makes the Safari UA unique, which I would suggest is best accomplished with "is AppleWebKit and is not CriOS":
var ua = window.navigator.userAgent;
var iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i);
var webkit = !!ua.match(/WebKit/i);
var iOSSafari = iOS && webkit && !ua.match(/CriOS/i);
UPDATE: This is a very old answer and I cannot delete it because the answer is accepted. Check unwitting's answer below for a better solution.
You should be able to check for the "iPad" or "iPhone" substring in the user agent string:
var userAgent = window.navigator.userAgent;
if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
// iPad or iPhone
}
else {
// Anything else
}
best practice is:
function isMobileSafari() {
return navigator.userAgent.match(/(iPod|iPhone|iPad)/) && navigator.userAgent.match(/AppleWebKit/)
}
Merged all the answers and comments.
This is the result.
function iOSSafari(userAgent) {
return /iP(ad|od|hone)/i.test(userAgent) &&
/WebKit/i.test(userAgent) &&
!(/(CriOS|FxiOS|OPiOS|mercury)/i.test(userAgent));
}
// Usage:
// if iOSSafari(window.navigator.userAgent) { /* iOS Safari code here */ }
// Testing:
var iPhoneSafari = [
"Mozilla/5.0 (iPhone; CPU iPhone OS 14_4_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1",
"Mozilla/5.0 (Apple-iPhone7C2/1202.466; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3",
"Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1",
"Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1",
"Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A5370a Safari/604.1",
"Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1",
"Mozilla/5.0 (iPhone9,3; U; CPU iPhone OS 10_0_1 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) Version/10.0 Mobile/14A403 Safari/602.1",
"Mozilla/5.0 (iPhone9,4; U; CPU iPhone OS 10_0_1 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) Version/10.0 Mobile/14A403 Safari/602.1",
];
console.log("All true:", iPhoneSafari.map(iOSSafari));
var iPhoneNotSafari = [
"Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/69.0.3497.105 Mobile/15E148 Safari/605.1",
"Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/13.2b11866 Mobile/16A366 Safari/605.1.15",
];
console.log("All false:", iPhoneNotSafari.map(iOSSafari));
Falling code only find mobile safari and nothing else (except dolphin and other small browsers)
(/(iPad|iPhone|iPod)/gi).test(userAgent) &&
!(/CriOS/).test(userAgent) &&
!(/FxiOS/).test(userAgent) &&
!(/OPiOS/).test(userAgent) &&
!(/mercury/).test(userAgent)
Seeing all the answers, here are some tips about the proposed RegExes:
AppleWebKit matches Desktop Safari too (not only mobile)
no need to call .match more than once for such simple regexes, and prefer the lighter .test method.
the g (global) regex flag is useless while the i (case insensitive) can be useful
no need for capture (parenthesis), we are just testing the string
I'm just using this since getting true for mobile Chrome is OK for me (same behavior):
/iPhone|iPad|iPod/i.test(navigator.userAgent)
(I just want to detect if the device is a target for an iOS app)
This regex works for me, clean and simple:
const isIOSSafari = !!window.navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);
Actually, there isn't a silver bullet of detecting mobile safari. There are quite a few browsers may use the keywords of the user agent of mobile safari. Maybe you can try feature detection and keep updating the rule.
I know this is an old thread, but I'd like to share my solution with you guys.
I needed to detect when an user navigates from Desktop Safari (Because we're in middle 2017, and Apple hasn't give any support for input[type="date"] YET...
So, I made a fallback custom datepicker for it) . But only applies to safari in desktop because that input type works fine in mobile Safari. So, I made this Regex to only detect desktop Safari. I already tested it and it doesn't match with Opera, Chrome, Firefox or Safari Mobile.
Hope it may help some of you guys.
if(userAgent.match(/^(?!.*chrome).(?!.*mobile).(?!.*firefox).(?!.*iPad).(?!.*iPhone).*safari.*$/i)){
$('input[type="date"]').each(function(){
$(this).BitmallDatePicker();
})
}
I upvoted #unwitting 's answer, as it inevitably got me going. However, when rendering my SPA in an iOS Webview, I needed to tweak it a bit.
function is_iOS () {
/*
Returns (true/false) whether device agent is iOS Safari
*/
var ua = navigator.userAgent;
var iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i);
var webkitUa = !!ua.match(/WebKit/i);
return typeof webkitUa !== 'undefined' && iOS && webkitUa && !ua.match(/CriOS/i);
};
The main difference being, the renaming of webkit to webkitUa, so as to prevent clashing with the root webkit object used as a message handler between the SPA & UIView.
I was looking for this answer and I remembered I came across this before.
The most reliable way to detect Safari on iOS in JavaScript is
if (window.outerWidth === 0) {
// Code for Safari on iOS
}
or
if (window.outerHeight === 0) {
// Code for Safari on iOS
}
For some reason Safari on iOS returns 0 for window.outerHeight property and window.outerWidth property.
This is for all iPads and iPhones on all versions of iOS. Every other browser and device this property works normally.
Not sure if they intend to change this but for now it works well.
Based on unwitting answer here is regex if someone needs it.
/^(?=.*(iPhone|iPad|iPod))(?=.*AppleWebKit)(?!.*(criOS|fxiOS|opiOS|chrome|android)).*/i
It's been many years and Apple still hasn't fixed their bottom fixed positioning (100vh) bug on mobile Safari. Even though every other browser works fine.
So, There's also a vender property that'll say "Google, Inc" for Chrome and even Brave, other Webkit browsers if the userAgent is Webkit Safari unless it says "Apple Computer Inc." in which case it's Safari.
To avoid false positives in Desktop Safari, you need the maxTouchPoints property as well, which will be 5 for mobile and 0 for desktop. Horrifying, I know.
const isSafari =
navigator.userAgent.match(/safari/i) &&
navigator.vendor.match(/apple/i) &&
navigator.maxTouchPoints;
if (isSafari)
$("body").classList.add("mobile-safari");
Then make adjustments in the CSS using that mobile-safari class.
function isIOS {
var ua = window.navigator.userAgent;
return /(iPad|iPhone|iPod).*WebKit/.test(ua) && !/(CriOS|OPiOS)/.test(ua);
}
var isApple = false;
if(/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
isApple = true;
}