I have a webpage and I was recently asked to create the mobile version for it, now that I've done it I was asked to make an automatic redirection so that if the user goes into the webpage through a PDA/iPhone/Smartphone/etc he/she gets automatically directed to the m.website.com but I have no idea how to do this =/ I've tried some php's and javascripts I found using google but nothing so far has helped me. Could you guys?
Check out WURFL and build a 302 redirector for User-Agents that match its list of mobile browser user-agent strings.
Or, just look for iPhone in the User-Agent and redirect those to your iPhone site. The other browsers command such small market-share it is hardly worth targeting them. iPhone is 67 percent of the mobile web HTML traffic. You could do this in Javascript on your web page.
I have published the last version of "Apache Mobile Filter", this open source project has in the first 8 months, more than 1100 downloads from sourceforge and I suppose the same from CPAN.
The Apache Mobile Filter allows you to access WURFL from any programming language, not just Java and php that is traditionally used for dynamic mobile web sites.
The module detects the mobile device and passes the WURFL capabilities on to the other web application as environment variables. It can also be used to resize images on the fly to adapt to the screen size of the mobile device.
Try it and let me know your opinion.
For more info: http://www.idelfuschini.it/it/apache-mobile-filter-v2x.html
I wrote a JS script called "redirection_mobile.js" to solve this issue. It detects the User Agent and redirects to a mobile version if you're accessing a site from a mobile device.
In some case you want to redirect from a mobile device to a desktop version (like with a link "Go to the main site"), the script will handle that and once you finish your session, you'll access to the mobile version again.
You can find the source code on github here https://github.com/sebarmeli/JS-Redirection-Mobile-Site and you can read more details in one of my article here:
http://blog.sebarmeli.com/2010/11/02/how-to-redirect-your-site-to-a-mobile-version-through-javascript/
perhaps if you list your code that is not working, more help could be provided.
if you've got php, User Agent detection works well in most circumstances.
< ?php
$browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
if ($browser == true) { header(”Location: http://www.example.com/“); }
}
?>
Also, this looks like a dupe of:
Identifying different mobile handsets and redirecting to different websites
A very similar question was asked and answered here:
How do I determine whether it's a mobile device with PHP?
Traditionally mobile devices have been
detected by comparing the HTTP
User-Agent header against a list of
well known mobile UA strings. A novel
approach instead tries to detect the
presence of a desktop OS - anything
which is found to not be a desktop OS
must then be mobile.
This results in far less false
positives.
I've written a post with sample code
in Python here:
http://notnotmobile.appspot.com
Detect whether a device is a desktop - if it is not then redirect to your mobile site!
Cheers,
John
Once you get your mobile subdomain set-up, be sure to refer to this article from A List Apart which describes how mobile devices react to the CSS attribute, media="handheld". Unfortunately, not all react equally.
http://www.alistapart.com/articles/returnofthemobilestylesheet
The "Apache Mobile Filter" is one of the modules of "Apache Module Registry" portal (http://modules.apache.org/search.php?id=1787)
I use http://detectmobilebrowser.com, and found it is the quickest and easiest way. It works quite well. This site generates server scripts automatically (php, perl, python, coldfusion, apache, jquery, etc.) that detects mobile browser and redirects accordingly. You can just copy and paste the code somewhere in your Index file.
This bit of Javascript also might assist:
<script>
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB10|IEMobile|Opera Mini/i.test(navigator.userAgent) ) //Specify the mobile devices that you would like this if statement to apply to.
{
image_y = document.getElementById('bodyID'); //Get the ID of the body and assign it to a variable.
image_y.parentNode.removeChild(image_y); //Remove the body to prevent anything loading on the screen in case there are issues with the window location redirect.
window.location = "mobile.html"; //Re-assign the window location to a new html page that is caters for the redirect.
}
</script>
I placed it in the start of the HTML body.
Related
I have been thinking about making a QR code that goes to a webpage which then queries the user agent ID and redirects to the correct app store depending on the mobile telephone. (Google Play and iTunes) Would detecting the user agent be a sufficient solution to this? Or do I need to consider other/more data? (I am thinking best thing would be e.g. a PHP code library hosted on own domain, but alternatively and online service.)
Yes. Sniffing the user-agent is the best way to determine which phone is which.
Do note, that some users will have switched from their phone's default browser to a 3rd party one such as Chrome, Firefox, Dolphin, etc.
Generally, checking the presence of "Android" in the User-Agent string is enough.
In PHP, you can use http://php.net/manual/en/reserved.variables.server.php
$ua = $_SERVER['HTTP_USER_AGENT'];
if (stripos($ua, "android") !== FALSE) {
// Send to Play Store
}
Make sure that if you don't recognise the UA, you give the user a choice of where to go - Play Store, App Store, your homepage, etc.
Finally, make sure you keep accurate statistics. If you see lots of BlackBerry users scanning your code - it's time to make a BlackBerry App :-)
I'm trying to block all the PC, laptops and send them to a blank page or any page that I set it up for a PCs site.
I just have a mobile version website and I only want to allow iOS such as iPad, iPod and iPhone to visit my website and block the rest for my security purpose
I'm trying to search in here and google I think I'm using some kind of wrong term or maybe something that I don't know exactly but I see many website does that.
Thanks
I would just scan the user-agent. Find the ones that you will accept and then redirect the rest to a non-blank sorry page. A blank page would not be very nice, so a simple sorry would do. I say this because maybe the user has a mobile device to use, but happens to be on a pc. A blank page would make them think that the site is junk or doesn't work and you might lose their mobile traffic also.
block the rest for my security purpose
How secure does this need to be? You shouldn't trust the client to always tell you the truth about what they are.
I suggest you use some other mechanism to ensure security, for example username/password.
I used MobileESP to detect when someone using a smartphone connects to my website. This uses PHP, and has some functions to make it pretty simple. I'm sure you can accomplish it with the above methods, but in case this would be of some help...
http://blog.mobileesp.com/
I want to give web applications running on foreign servers access to smartphone sensors and address book data. The W3C is working on a spec for that, called the Device APIs. However, it is not finished yet, and it will probably take quite some time until browser vendors provide working implementations.
But I need this functionality NOW (for a proof of concept). I do not care about portability, Android would be enough. Requiring the user to install special software first would also be OK.
Two solutions come to my mind:
Hack the APIs into the browser myself. Maybe I could take Phonegap and easily write a browser wrapper with it? That is, build a browser with Phonegap that exposes the Phonegap JS APIs to arbitrary sites (don't care about security for now)?
Write a server and run it on the smartphone localhost. This server would provide access to the resources via HTTPS and OAUTH2 (for example). Web applications could then reference this localhost server in their code (HACK HACK .. are there security mechanisms that prevent an arbitrary site from accessing a server running on localhost?).
Suggestions welcome.
Use a WebView:
http://developer.android.com/reference/android/webkit/WebView.html
This class is the basis upon which you can roll your own web browser
A WebView has several customization points where you can add your own behavior. These are:
Adding JavaScript-to-Java interfaces
with the
addJavascriptInterface(Object, String)
method. This lets you bind Java
objects into the WebView so they can
be controlled from the web pages
JavaScript.
You'd need to create an application that acts as the browser, (by implementing a custom WebView). Then in that application, create a java object for the web view that will fetch the sensor information. In the server output, write javascript that tests for and accesses this object.
For android, I believe you can expose custom local functionality to javascript either by wrapping a webview in your own lightweight "browser" application or by building a plugin for the supplied browser. As pointed out in this question How to develop plugins for the native Android browser there is an example in the sdk samples.
But I for one would be rather upset if you enabled a website to access my device's contacts, and would probably refuse to install your application on my device.
I have two problems with google's mobile analytics: (I am using the native version - not web)
I see pagevies but I don't see my events. This might be since you can't configure the GA website to a native mobile app traching.
The app isn't launch yet, I am the only one using it and GA reports 14 unique visitors - ha?!
Not exactly sure what you are asking, but can't really help without seeing code regardless
More than likely the GA cookie is being removed or not being set on your phone, or your IP address is changing or both.
My wish is to know how I can program a mobile website, that fit to all mobile phones.
Are there any special approaches to recognize a device and render the code according to it?
Which tools and coding languages are required?
My first thought was to hold the website in XML, which would be parsed depending on the device.
You have to consider old phones, even devices with only wap support.
For example: The mobile website has to recognize Nokia N75 and render/send the code that looks optimal for this device. Same thing with an iPhone or a Motorola Razr.
There are all sorts of problems associated with developing mobile websites. Doing it well takes a lot of time and effort, as phones have such varying support of web standards. There are tools that do it for you, such as the Mobile Web Toolkit and Vodafone's PartnerMl. These tend to force you to write your pages using dedicated XML tags which describe a limited set of elements and styles that can be rendered on the page. The phone requests these xml pages, and the server side software intercepts the request, examines the type of phone (the User Agent), and serves back markup appropriate to that phone. The disadvantage of this system is that it is very inflexible; you are limited to the set of XML elements that the tool supplies, rather than the full flexibility of HTML.
If you want to do it yourself, essentially, you have to do the following.
Using server-side code, examine the User Agent in the Http Header. This tells you what kind of phone/browser made the request
Output appropriate markup and CSS for that user agent.
Useful tools are the User Agent Switcher add-in for Firefox. Using this, you can, for instance, visit the BBC's website, pretending to be various devices. You will see that the BBC outputs 3 or 4 versions of its markup, as well as 3 or 4 different versions of the CSS, depending on the user agent.
mobiForge contains useful information. WURFL and DeviceAtlas are databases that allow you to determine the capabilities of the device that has made the request.
You will quickly realise that you will have to keep your design simple, and it's best not to rely on Javascript, as only the most modern phones can handle it well.
XML is the way to go.
From there, you mosey on to parsing out and acting upon the Agent tags in the request.
From there you can choose (assuming the device supports it), having the device render it via XSLT, or you can apply the XSLT on your end and stream down the appropriate markup language for the device.
In the end, you end up with a specific "rendering" per device. Ideally, the more compatible the devices are with normal browsers, the close the final XSLT is to each other. But you'll still likely have a version for each device that you support.
The beauty of this is that you can add devices incrementally, as time and demand permits. And as devices converge, you gain value by being able to converge your renderings. Also, your back end stays the same no matter what.
Finally, it also works great for non-mobile as well.
Yea, it's a burden to support the different devices, but that's just a truth of the marketplace.
One way is to use strict html with very clear semantics and minimum of css tricking. Do only use relative measures (for example em and %). Trust the browsers default values, because they are in one way optimal for every device, more or less.
Nowadays there isn't exist good tools to do this.
A good practice is to respect the different W3C standards about the accessibility (like the WCAG, the XHTML, etc).
If you made your web site the most accessible as possible it'll be more adaptable. (independently from device, screen size, with or without screen touch...)
If you want more information you can read one of my article about the web accessibility here if you want: Guideline to move a website on a mobile device.
However you can use some meta tags to allow the web browser of the phone to adjust the content like this for the iPhone:
<meta name="viewport" content="width=device-width">
You might wanna check out WURFL