I'm using code to redirect mobile devices that are under 699 pixels wide to go to our mobile site. This method utilizes JavaScript and cookies and follows some basic logic:
Do not run logic for redirect if cookies are disabled
Do not redirect if cookie skipmobile is set to 1
Redirect only if skipmobile is not 1, and your mobile device is listed below and under 699 pixels wide.
//{{Full Site Code}} Only run logic if cookies are enabled.
if(navigator.cookieEnabled){
//If the cookie skipmobile is already set do not redirect to mobile.
if (document.location.search.indexOf("skipmobile") >= 0) {
document.cookie = "skipmobile=1";
}
//If the device is one of the types listed below and is under 699 pixels wide, redirect to the mobile site.
else if (((/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) && screen.width < 699)
&& document.cookie.indexOf("skipmobile") == -1)
{
document.location = "'.MOBILE_SITE.$direct.'";
}
}
On the mobile site I simply have a link like the following that someone can click to set the cookie
http://www.example.com?skipmobile=1
This code works properly for me and most people, but we are having customers saying When they click the full site link it sends them right back to the mobile site. According to the code this means they do have cookies enabled but their cookie isn't getting set.
Is there something I need to do to this code that's missing?
UPDATE: So this problem is a bit of an oddball. One of our employees is having the issue as well so we at least have a phone to test on. We have a live site and a dev site. It works for him of we go to the dev site and redirect but it doesn't for the live...
Does this help anyone come up with conclusions? The code is the same on both sites.
You should try deleting all cookies related to your site beforehand, as this should clear up any problems. This is a link to a great function that should do this for you:
Clearing all cookies with JavaScript
You could also put that you don't want it to cache for a while in the headers (using the cache control var) to make sure that if the phone is storing any problems these are removed
Related
I am trying to redirect pc users who are using adblock to a certain page.but i dont want to redirect mobile users.
here is my code
<script src="/assets/js/ads.js" type="text/javascript"></script>
//the bait for adblock
<script type="text/javascript">
if(document.getElementById('ElvJCLbfcHDP')){
alert('Blocking Ads: No');
} else {
alert('Blocking Ads: Yes');
}
as you can see this only shows if the ads are blocked or not.but what I want to do is check if users are coming from mobile or PC then redirect only PC adblock users to a certain page and let mobile users use site as it is.
i found this
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// some code..
}
but as u can see it only detects if users is from mobile and then run the code.i want it to check if user is from PC and then run the redirect
Use ! logical not operator to alter the statement
if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// Desktop / pc
}
Don't try to redirect based on a test for a device.. You'll spend every moment of your time updating the list and wondering why some devices that are on your list are getting through. navigator.userAgent is notoriously unreliable.
From MDN:
Deprecated This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of
being dropped. Avoid using it and update existing code if possible;
see the compatibility table at the bottom of this page to guide your
decision. Be aware that this feature may cease to work at any time.
The NavigatorID.userAgent read-only property returns the user agent
string for the current browser.
The specification asks browsers to provide as little information via
this field as possible. Never assume that the value of this property
will stay the same in future versions of the same browser. Try not
to use it at all, or only for current and past versions of a
browser. New browsers may start using the same UA, or part of it, as
an older browser: you really have no guarantee that the browser agent
is indeed the one advertised by this property.
Also keep in mind that users of a browser can change the value of this field if they want (UA spoofing).
Typically, a desktop can be rooted out simply by the width of the window (as measured in CSS pixels, not hardware pixels).
if(window.innerWidth > 1280){
location.href = "desktop path";
} else {
location.href = "mobile path";
}
I'm developing website with a lot of HTML5 and CSS3 features. I'm also using iframe to embed several content on my website. It works fine if I open it using Chrome/Firefox/Safari mobile browser. However, if I share on facebook (post/page) and I opened it up with Facebook application with Facebook Internal Browser, my website is messed up.
Is there any tools or way to debug on Facebook Browser? Thanks.
This is how you can do the debugging yourself. It's painful, but the only way I've come across so far.
tl;dr Get the Facebook App loading a page on your local server so you can iterate quickly. Then print debug statements directly to the page until you figure out what is going on.
Get a link to a page on your local server that you can access on your mobile device (test in mobile safari that it works). See this to find out your local IP address How do you access a website running on localhost from iPhone browser. It will look something like this
http://192.xxx.1.127:3000/facebook-test
Post that link on your Facebook page (you can make it private so your friends aren't all like WTF?)
Click the posted link in the Facebook mobile App and it will open up in Facebook's mobile browser
Since you don't have a console, you basically need to print debug statements directly to the page so it is visible. Put debug statements all over your code. If your problems are primarily related to CSS, then you can iteratively comment out stuff until you've found the issue(s) or print the relevant CSS attributes using JavaScript. Eg something like (using JQuery)
function debug(str){$('body').append("<br>"+str);}
Quite possibly the most painful part. The Facebook browser caches very aggressively. If you are making changes and nothing has happened, it's because the content is cached. You can sometimes resolve this by updating the URLs, eg /facebook-test-1, /facebook-test-2, or adding dummy parameters eg /facebook-test?dummy=1. But if the changes are in external css or js sheets it sometimes will still cache. To 100% clear the cache, delete the Facebook App from your mobile device and reinstall.
The internal browser the Facebook app uses is essentially a uiWebView. Paul Irish has made a simple iOS app that lets you load any URL into a uiWebView which you then can debug using Safari's Developer Tools.
https://github.com/paulirish/iOS-WebView-App
I found a way how to debug it easier. You will need to install the Ghostlab app (You have a 7-day free trial there, however it's totally worth paying for).
In Ghostlab, add the website address (or a localhost address) you want to debug and start the session.
Ghostlab will generate a link for access.
Copy that link and post it on Facebook (as a private post)
Open the link on mobile and that's it! Ghostlab will identify you once you open that link, and will allow you to debug the page.
For debugging, you will have all the same tools as in the Chrome devtools (how cool is that!). For example, you can tweak CSS and see the changes applied live.
If you want to debug a possible error, you can try to catch it and display it.
Put this at the very top of your code:
window.onerror = function (msg, url, lineNo, columnNo, error) {
var string = msg.toLowerCase();
var substring = "script error";
if (string.indexOf(substring) > -1){
alert('Script Error: See Browser Console for Detail');
} else {
var message = [
'Message: ' + msg,
'URL: ' + url,
'Line: ' + lineNo,
'Column: ' + columnNo,
'Error object: ' + JSON.stringify(error)
].join(' - ');
alert(message);
}
}
(Source: MDN)
This will catch and alert your errors.
Share a link on Facebook (privately), or send yourself a message on Facebook Messenger (easier). To break the cache, create a new URL every time, e.g. by appending a random string to the URL.
Follow the link and see if you can find any errors.
With help of ngrok create temporary http & https adress instead of your ordinary localhost:3000(or other port) and you could run your app on any devices. It is super easy to use.
and as it was written above all other useful information you should write somewhere inside div element (in case of React I recommend to put onClick on that div with force update or other function for getting info, sometimes it helps because JS in FB could be executed erlier than your information appears). Keep in mind that alerts are not reliable, sometimes they are blocked
bonus from ngrok that in console you will see which files was
requested and response code (it will replace lack of network tab)
and about iFrame.If you use it on other domain and you rely on cookies - you should know that facebook in-app browser blocks 3rd party cookies
test on Android and iOS separately because technicaly they use different browsers
I'm testing a few JavaScripts that redirect mobile users from a main website to a mobile website. What I have found uses cookies however, and the cookies seem to prevent returning users from going directly back to the mobile website, without clearing the browser's cookies, not just closing browser.
Can I do this with a variable instead of a cookie? Or PHP?
This simple script looks like it uses use a file value stored, but I can't get it to work.
<script>
if (document.location.search.indexOf("skipmobile") >= 0) {
document.cookie = "skipmobile=1";
}
else if ((document.location.hostname.match(/\.mobi$/) || screen.width < 699)
&& document.cookie.indexOf("skipmobile") == -1)
{
document.location = "mobile/";
}
</script>`
Mobile side link to full site has this ending:
http://www.domain.com/?skipmobile=1`
Any suggestions appreciated.
I chanced upon this article that you have, I am Neil and I work for handsetdetection.com. Just to let everyone of your reader know that there is also another way of redirecting your viewer to a mobile site that you have and automatically adjust the screen size and buttons to whatever type of mobile device they are using. However, having a mobile version of your site is not enough, you have to redirect your visitors from your main website to a mobile version of your site. It is called handsetdetection and it is quite easy to install as a plug in to any back end of your site.
Hope this helps,
Neil Summers
I am using javascript as useragent to redirect main website to mobile website. but i can not switch to desktop view in mobile device.
Any ways to redirect to the main website on mobile device by link "Full Website"?
This is javascript i am using:
<script type="text/javascript">// <![CDATA[
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windowssce|palm/i.test(navigator.userAgent.toLowerCase()));
if (mobile) {
document.location = "/mobile";
}
// ]]>
</script>
Add this as link:
Desktop version
And the javascript (you need to implement the code mentioned as comments):
function goToDesktopVersion(){
// 1.) set a cookie to remember you want the deskop version
// 2.) set window.location to your desktop version
}
And consider the cookie in your detection code (implement commented code):
function keepDeskopVersionCookieIsSet(){
// find out if the cookie is set and return true or false
}
...
var mobile = ...
if (mobile && !keepDeskopVersionCookieIsSet() ) {
document.location = "/mobile";
}
The cookie is needed in order that the mobile client will not get redirected again to the mobile version after the "Desktop version" link was clicked.
A cookie is a small piece of data which is stored on the client's browser to keep some information. In this case, this is the information that the user wants to keep the desktop version of your page. Cookies are always sent between server and client to each other, so you can the set on the client (browser) or on the server as well. In a browser, you can set a cookie using Javascript. Instead of writing all the code from scratch which is needed to save the cookie, I would recommend to use some existing helper code which does the work for you.
I have a joomla site and i have build a jquery mobile website so i use this this code below,
<script type="text/javascript">
<!--
if (screen.width <= 680) {
window.location = "site.com";
}
//-->
</script>
But the my problem is that in my jquery site i have a view full site this code i have put it in index.php of my main template so in every page that joomla creates so user can see this code exist
My question is how i can write this script when the user click from mobile jquery site "view full site" and not again redirect him back to mobile site.
Because when the user press the button view full site went to the full site and after seconds he turn back to mobile cause of this script..
Ideally, the switch should be done server-side, as the overhead in sending the page to the browser only to be redirected is unnecessary.
Here is a link to get you started with that but to focus on a your specific question: You can store the preference in a session variable which is then checked in your conditional above. This can be done either in JavaScript or php.
If you were to stick to your client-side approach above, you could modify the if statement to if (screen.width <= 680 && readCookie('screenpref') != 'desktop') {} after creating your setCookie() and readCookie() functions.
Like Joe said I also reccomend a serverside solution which is way more efficient check this link I just found, which is a quite comprehensive list of user agents you can check to redirect on : http://detectmobilebrowsers.com/
For those of you that don't know the user agent is part of the header of the request and describes the client software that oriniganated the request. Basicly its a string that you can use to identify which device requested your web page.