I want to open google maps by clicking on the element on mobile devices.
<img src='/img/pin.svg'>
Here it's my code. It's working on Android devices, but not on Apple's. So here is my question, how to ask for opening maps on both of those devices?
To open "maps" on an iOS device (or Mac for that matter) you'd use:
http://maps.apple.com/?ll=50.060915,19.948066
I think you'd have to write some javascript to determine platform, and then open one of the two urls.
This would generally look like this:
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;
if(isAndroid) {
window.location = 'geo:50.060915,19.948066';
}
else {
window.location = 'http://maps.apple.com/?ll=50.060915,19.948066';
}
Put that in an onclick handler for the a and you're set!
Related
I have add-on for Chrome and Firefox, they are same just for different browsers. Is it possible to have one link/button for the add-on, once user clicks it, it will be recognized which browser user is on and opens Chrome vs Firefox add-on.
It would be possible to have in html 2 buttons and hide one for each browser, but I would like to have just one button.
Thanks!
You can extract browser name from navigator.userAgent then set needed link
Add-on Link
<script>
var link = document.querySelector("#link");
var userAgent = navigator.userAgent;
if (userAgent.indexOf("Firefox") > 0) {
link.setAttribute("href", "https://www.mozilla.org");
} else if (userAgent.indexOf("Chrome") > 0) {
link.setAttribute("href", "https://google.com");
}
</script>
I am putting together a landing page for my app. And I want it to show only the "App Store" icon if they are on an iOS device, but hide it from Android. And only the "Play Store" icon if they are on an Android device, and hide it from iOS users.
Can you please help?
Cheers!
You can use javascript to know if the user is in android or iOS and then add a hidden class to the item respectively.
I do it in some of my websites like this:
var ua = navigator.userAgent.toLowerCase();
var isiPhone = ua.indexOf('iphone') > -1;
var isiPad = ua.indexOf('ipad') > -1;
var isAndroid = ua.indexOf('android') > -1;
Hope this can help you.
I'm trying to redirect user's of my mobile webapp to use Chrome rather than Safari. I tried using the following:
<script>
javascript:location.href="googlechrome"+location.href.substring(4);
</script>
However this constantly opens tabs in Chrome in a loop. Do you know how I can successfully do this?
Cheers,
Dara
This will cause the page to open every time the webpage is loaded, regardless if you are in Safari or Chrome. This is also very poor User Experience to just forward the user to another browser without their input.
It would be better to have some way for the user to open your site in Chrome and also to have an explanation why it is needed.
There are other schemes for https and callbacks: https://developer.chrome.com/multidevice/ios/links#uri_schemes
<p>This webapp is best viewed in Google Chrome</p>
<button type="button" onclick="openInChrome()">Open in Chrome</button>
<script>
var openInChrome = function() {
if (/^((?!Chrome).)*(Safari)+.*$/.test(navigator.userAgent)) {
var protocol = location.href.substring(0,location.href.indexOf(':'));
var url = location.href.substring(location.href.indexOf(':'));
if (protocol === "http") {
location.href = "googlechrome" + url;
}
else {
location.href = "googlechromes" + url;
}
}
}
</script>
Edit:
Added a check to verify they are in Safari.
Well, the reason is pretty obvious; Chrome is instructed to open Chrome too. You just want a userAgent conditional.
if (navigator.userAgent.indexOf("CriOS") == -1) {
location.href="googlechrome"+location.href.substring(4);
}
I would go on my standard rant about user agent checking being bad, but I trust what you're saying about this being a private webapp. Since iOS doesn't let you change your default browser, I guess this is a fair workaround.
I've recently created a separate mobile skin for a website. The site serves the mobile version of a page based on the screen size of the device it is being viewed on using the following code.
<script type="text/javascript">
if (screen.width <= 600) {
window.location = "mobile/";
}
</script>
I'd now like to add a "view desktop version" link at the bottom of the page. Naturally, with the above code in the header of each page, it just detects the screen size again and loops back.
Could someone please suggest how I could get around this. I suspect this will be a session or a cookie but I'm very new to java and don't know how to set these up.
thanks in advance for any advice.
This should be handled by the viewport in the metatag of your website. The use of jquery can allow users to opt out of responsive design:
var targetWidth = 980;
$('#view-full').bind('click', function(){
$('meta[name="viewport"]').attr('content', 'width=' + targetWidth);
});
See this link for more clarification.
To detect if link was clicked you can:
Add a specific query parameter (like ?forceDesktop=true) which should be removed if returned to mobile
Use media queries and single skin (see bootstrap)
Maybe look for more elaborate version to detect mobile (link)
Chrome for Android has option to request desktop site (How to request desktop
I've managed to come up with another solution using local storage which is really simple for a beginner like me. It's probably an amateurish way of doing things but it certainly works for my purposes.
So updated the code on the desktop version of the site to:
var GetDesk = 0;
var GetDesk = localStorage.getItem('GetDesk');
//check screen size is less than 600
if (screen.width <= 600) {
//check if there's anything in local storage showing the users requested the desktop
if (GetDesk == 0 ) {
window.location = "/mobile.html";
}
}
then added code to the mobile version of the site to check if the user has previously requested the desktop version:
var GetDesk = localStorage.getItem('GetDesk');
if (GetDesk == 1 ) {
window.location = "/desktop.html";
}
Then at the bottom of the mobile version added the button:
<!-- onclick set the value of GetDesk to 1 and redirect user to desktop site -->
<button onclick="localStorage.setItem('GetDesk','1'); window.location.href = '/desktop.html';">View desktop</button>
As I say, perhaps not the best way but it certainly works and is easy for beginners.
I am looking for a way to launch a popup when a website is viewed via a mobile browser, asking the user if they would like to install our App. But I only want the popup prompt to appear if the App is not already installed.
I have used the following JavaScript (which will work for Apple devices:
<script type="text/javascript">
if( /iPad|iPhone/i.test(navigator.userAgent) ) {
var url=confirm("Would you like to download our mobile application?");
if (url==true)
{
var url = window.location.href = 'http://www.itunes.com';
url.show();
}
else
{
}
}
</script>
As has been discussed here: App notification popup mobile device web browser
However, this popup launches on iOS regardless. I understand you can check for an app url scheme (and so find out if the App is installed) here: How to launch apps (facebook/twitter/etc) from mobile browser but fall back to hyperlink if the app isn't installed
Can I accomplish this by incorporating these two techniques?
You can use this if your app has a custom URL scheme:
<script type="text/javascript">
function startMyApp()
{
document.location = 'appCustomScheme://';
setTimeout( function()
{
if( confirm( 'Install app?'))
{
document.location = 'http://itunes.apple.com/us/app/yourAppId';
}
}, 300);
}
</script>
and call the function startMyApp() on page load, or if you need to bind it to some javascript event (click, etc.).
If you are trying to detect whether twitter or Facebook is installed in your device you can use this in your script.
var url = window.location.href = 'fb://';
for twitter
var url = window.location.href = 'twitter://';
If it does not work, try taking out the //. The above statements will open the twitter or facebook app, you can use that in a if loop or something to detect whether a app is installed on the device.