Flash always on top in Android browser workaround? - javascript

I have a website with a simple Flash animation behind some text and semi-transparent images as a background. I have used swfobject to embed it and set wmode opaque to make it display correctly in most browsers.
For browsers without Flash, the user gets a static background image instead and would not know they were missing anything. However, Android users get the flash background on top of everything as per the known issue with how Flash content is rendered in the Android browser making the site unusable.
I have added a crude browser sniff javascript function to the swfobject code to prevent it from loading for any user agent whith 'Mobile' in it:
<script type="text/javascript">
if (navigator.userAgent.indexOf('Mobile') == -1)
{
var flashvars = {};
var params = { wmode: "opaque" };
var attributes = {};
swfobject.embedSWF("Images/Layout/center_flash.swf", "flashBg",
"1004", "502", "9", "false", flashvars, params, attributes);
}
</script>
The only problem I have left is for Android users browsing with 'Mobile View' turned off as the user agent pretends to be a desktop version of Safari (I think). I do not wish to disable the Flash animation for all Safari users. Is there a way of blocking it for just Andriod users - even if they have 'Mobile View' disabled?
Possible ideas include:
detecting the Flash version with JavaScript or Flash. Does Android use specific versions (version numbers) of Flash which are different from the desktop equivalent?
blocking the specific user agents used by Android devices with 'Mobile View' disabled.
Has anyone come up with an effective workaround for this issue?
Your help/input is appreciated!

You can detect android only by checking the userAgent of the browser in your JavaScript
Something like this:
if (navigator.userAgent.toLowerCase().indexOf("android") != -1)
{
// It's android
}
As far as the flash issue itself, I don't know as I never use flash :P
edit
You can also use that technique for other useragents (I.E. iPhone, iPad, safari)
edit2
Sorry, I just went on my android phone and realized the actual setting changes the userAgent to whatever the user picks (desktop/ipad/iphone/safari). That's no good then, I apologize.
Unfortunately, what you are asking is very difficult then. There are no unique identifiers in the android flash version to give you any help. And the fact that android spoofs the userAgent makes it impossibly to detect if they are on mobile or not.

There exist services that can tell you whether a user is on mobile based on their IP.
I'm sorry to say I don't know how fast, reliable, or expensive they are, but if you must determine whether a user is on Android, that's an avenue to consider

Related

How do I lock the screen orientation to portrait in Safari using plain JavaScript?

I want to "lock" the orientation of the website to portrait mode in safari using pure javascript.
Let's say that I am building an application, I don't want users to be able to visit my app in landscape-mode. How do I do that?
Edit: I make the app in web-languages, I will assign it as a profile so anyone can download it on iPhone, so nothing with xCode or something.
the screen.lockOrientation method is not supported by Safari, so you'll have to do feature detection.
For Safari, you might try the ponyfill: https://github.com/chmanie/o9n
maybe using "windows.screen" work for you;
var alowed = window.screen.orientation.lock("portrait");

getUserMedia in PWA with manifest on iOS 11

I have created a PWA which uses WebRTC's getUserMedia to get a live camera stream. The PWA uses a manifest.json, and works great on Android.
On iOS however, the app also works if I open the link directly in Mobile Safari, but if I add it to the homescreen, it is undefined (as iOS only allows it in the Safari-context).
As a workaround, I would like to open the app in Mobile Safari instead of fullscreen mode, but I don't know how to do this, as it automatically opens fulscreen once it detects the manifest.json.
Does anyone have an idea as how to open an app with a manifest in Safari?
Thank you!
There is a way to open the PWA avoiding full screen mode.
In manifest.json, change the display attribute to "browser".
"display": "browser"
Refer this documentation under section "Display".
You can also consider "minimal-ui" option.
Please keep in mind, when you make this change, it will not just reflect in iOS, but also in Android.
On the actual issue in accessing getUserMeida, I don't understand why its not working in full-screen mode. Its just a HTML5 feature and nothing specific to PWA. So ideally, it should work in full-screen mode as well. Try to capture for any error when you open in full screen mode and post that here if you find any. It might be due to permissions as well and I recommend solving the issue in full-screen mode for better user experience.
I figure out this by adding two manifest.json, one used by default for non ios devices and one for ios devices, I also create a detect.js script to detect wheter or not an ios device is accessing the pwa and change the manifest.json reference on the html. There is the code:
// Detects if device is on iOS
const isIos = () => {
const userAgent = window.navigator.userAgent.toLowerCase();
return /iphone|ipad|ipod/.test( userAgent );
}
// change manifest.json
if (isIos()) {
document.getElementById("manifest").href = "ios-manifest.json";
}
I would suggest you to set apple-mobile-web-app-capable to no with this meta tag in the head of the document:
<meta name="apple-mobile-web-app-capable" content="no">
This will avoid iOS to understand your web app as a PWA.

How to know if a mobile device is showing desktop?

I have seen very many questions asking how to detect if a device is mobile or not. Generally, they fall into 3 categories:
Check the screen size/viewport
Check the User Agent
Use a library, such as Modernizr to work around browser capabilities.
After implementing what I could, I still run across a situation which I have never seen asked or addressed; On many mobile browsers, there is a "Request desktop site" (Chrome) "Desktop Mode" (Dolphin) or "Desktop View" (HTC Sense).
I have chosen strategy #1 above, which works unless the page is viewed in desktop mode. Implementing #2 has drawbacks (spoofing, uncatalogued agents, etc.).
Is there a reliable (cross browser) way to detect Desktop Mode on a mobile browser with Javascript? jQuery or other libraries would be okay, but it should be based upon feature detection, rather than an array of User Agents.
So, Finally I have proven method to detect this. There's little tricky but got Exact Solution.
STEP 1
Install device-uuid Library , ( Here already mentioned. How to install )
<script src="https://raw.githubusercontent.com/biggora/device-uuid/master/lib/device-uuid.min.js"></script>
<script>
var user_configuration = new DeviceUUID().get();
console.log(user_configuration);
</script>
// output
// {"isAuthoritative":true,"isMobile":true,......"resolution":[980,1104],"browser":"Chrome"}
STEP 2
Detect device width
var curr_width = parseInt((window.innerWidth).toFixed());
STEP 3
Now need to compare curr_width with user_configuration.resolution[0] (width)
If both are same then this is normal view and if not then it's "DESKTOP VIEW" . attaching screenshot.
if(curr_width == user_configuration.resolution[0]){
alert("normal_view");
}else{
alert("desktop_view");
}
Screenshot of Desktop Mode ON in mobile browser
Screenshot of Normal mobile view
There is no way for a webpage to detect whether the device is actually a desktop computer or not. When "Request desktop site" is enabled, the phone acts just like a desktop does. One way to check this is to check the OS of the device. However, some phones use windows as their OS, so this won't work on windows phones.

stop loading website with a message due to incompatablity

I have developed a simple website using HTML5 and CSS3. I had lots of difficulties making it compatible with browsers other than chrome. "Changing the background image" Animation did not work in Firefox, IE. It worked only in Chrome. I want that visitors of my website should be able access website only if they have chrome, else it should give a warning message, or it may then open the chrome download page. I just don't want visitors to be able to view the "not so pleasant" website that is actually very bad in all other browsers but not chrome.
JavaScript would be good but I don't know anything about it. You can check the website here: http://aspspider.org/samarth
Websites are normally developed to be compatible with most users, not few. I strongly recommend that you redesign your webpage, or at least build a better looking one that doesn't have quite the functionality as Chrome's version, but is still useable by people with IE and FF. Limiting your webpage to people with Chrome is a very bad idea. If you really want chrome users to be able to get the full functionality that you have, then create a separate website in the background that is built for all other browsers. Then, when a user not using chrome loads the Chrome page (by default), then redirect them to the secondary, less functional webpage, and put a notification at the top of the secondary page with something along the lines of`"You are not using Google Chrome. To fully utilize this webpage, please Download google Chrome (That's a link to GC's download page) and reload (link to the default start page) this webpage in that browser instead." The redirect script would be as Merca suggested above:
<script type="text/javascript">
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (!is_chrome) window.location.href = "nonchrome/IEindex.html"; // redirects to IE & FF compatible webpage
</script>
Try google frame. It could load as soon as client is IE browser:
http://www.google.com/chromeframe?prefersystemlevel=true
Alternatively detect if browser is Chrome using JS:
<script type="text/javascript">
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (!is_chrome) window.location.href = "/get-chrome"; // or something...
</script>

Loading JS script for only iOS devices?

I have a jQuery script I'm using on a site to allow fixed position background images on iPhone/iPad/iPod. However it seems to be clashing with another script I am using on the site that enlarges background images full screen. Luckily they're independent of each other, I don't need the clashing background image script to work on iOS devices and vice versa.
Is there a way I can specifically target IOS devices to serve a JS file? I initially thought about using some kind of IF statement and doing it on window size but that started to get a bit complicated and affects other non-IOS devices. It just needs to run something like this...
..."if IOS device then load scroll.js"
I know device/browser sniffing is frowned upon but I can't think of another way around this problem.
You can use the Mobile Safari user agent string to detect mobile safari server-side, see: How do I detect Mobile Safari server side using PHP?
You can also do this in JavaScript:
if(navigator.userAgent.match(/(iPhone|iPod|iPad)/i))
See iPhone & iPod Detection Using JavaScript for more information.
You can use Detect Mobile Browser (it has a library for javascript).
you can also try this
if (navigator.userAgent.match(/like Mac OS X/i)) {
alert('Hi, you\'re browsing from an iOS device.');
}

Categories

Resources