Loading JS script for only iOS devices? - javascript

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.');
}

Related

How to force desktop browser to use media queries designed for mobile?

I've seen a bunch of stack overflow questions answered that address the problem of showing a desktop version on mobile, but I'm trying to discover how you could force a browser to render a mobile version of a site on desktop.
But is there some equivalent for desktop versions, so that I can 'trick' the browser into using media queries for a smaller device width? Essentially loading the mobile css onto the desktop version.
In essence I'm trying to add a toggle button that when clicked renders my page as though it were mobile. I'm aware you can achieve this affect with chrome tools, but I want to build in that functionality, and am struggling to figure out how to tell the browser to behave as though the viewport were mobile-sized.
Thank you!
if your CSS media queries doesn't work fine on desktop,
you're probably missing
<meta name='viewport' content='width=device-width' />
and if they work fine but you want your website to has same view in both mobile and desktop, then why are you using media queries at all?
remove them and your CSS will work on every size as the same
load the site on your mobile phone, take note of the url. If it has a "/m", for example, "https://www.example.com/m" then include it as such in your desktop browser and the mobile version would be loaded. It works for me.

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");

Exclude javascript from being loaded for touch screen devices

I am using tinyscrollbar to replace the standard scrollbars on desktop versions of my web app. The main reason for this is so that i have a consistent and nice design across all desktop browsers. On an android, mobile ios device and windows mobile device i would just want to use the native scroller. This means that i wouldnt want to include my scroller css nor the javascript for it. If anyone has any experience with this it would be very helpful. I worry about windows 8 machines becuase they are desktops and tablets.
for conditionnal loading, I suggest Yepnope, it is the script loader used in Modernizr (so if you use Modernizr, it's probably already there).
Modernizr.load({
test : Modernizr.touch,
nope : 'slick-scroller.js'
});

Switch web site to mobile css client side with JQuery

I am trying to change the display of my web pages depending on the version of the browser and space on screen. I need to completely change the look of the pages as follow:
If the site is displayed on a mobile phone I want the mini version.
If the site is displayed on a desktop browser but the size of the window is too small I want the mini version.
If the site is displayed on a desktop browser and the window can accommodate the full version I want the full version displayed.
If no javascript is available the full version should display.
I just started with some pretty basic code which relies on userAgent:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) )
Is there a clean way to achieve what I'm trying to do with JQuery for example?
Use CSS media queries. Sniffing the user agent is not reliable, and will lead to maintenance headaches in the future. Also, using media queries means no javascript is required which is good from a separation of concerns point of view.

Flash always on top in Android browser workaround?

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

Categories

Resources