I am trying to determine what kind of interface to show to a user. If a user is visiting my site with a touch screen phone, I want to show them one interface, otherwise, I want to show them another.
Does anyone know of a list of UserAgent string values so I can do this check? I know I can check for the iPhone using the following code in ASP.NET:
Request.UserAgent.IndexOf("iPhone", StringComparison.OrdinalIgnoreCase)
However, I would really like to find a list for other similar phones like
Palm Pre
Blackberry Thunder
etc.
The Mobile Device Browser File might be of some help. Example: http://www.hanselman.com/blog/MixMobileWebSitesWithASPNETMVCAndTheMobileBrowserDefinitionFile.aspx
I prefer WURFL, it is most up date database. And you can use .NET API Marg.Wurfl.
As far as i know at present,there are 147 different webphone browsers if you count versions as being different and 2438 makes/models (Samsung has about 180).
Having just a list i think is useless as there are android phones that do not report that name in the userAgent string; which implies that maybe nothing else is useful with that string.
Instead,use a set of simple PC-based browser tests and let the failure be "by gollie i am going to treat this user as a webphone".
Safe to test any "standard" browser IE6 to IE9 (have not tested beyond that) or mozilla; at fall thru test for Safari, Chrome or Opera. Treat those last 3 as webphone, and fail of those tests, treat user as a webphone.
Even IE5 acts fairly decently on moer "modern" web pages!
So one set of pages for standard, and another for limited, junkie (Safari and Opera are in both classes), or extremely variable webphones.
The lowest, junkiest webphone i have seen is the TracFone LG800G; rather limited memory and worse, limited page size.
Do not ask what those limits are as nobody is talking,but they are small compared to anything else.
Related
I'm learning HTML and CSS. I made this site at [No longer exists, sorry. Lesson learned: post the code].
When I view the site on an iPhone or iPad, the three images on the bottom are vertically stacked. When I view the website on Chrome using the Developer Tools, or "User-Agent Switcher for Chrome" (plugin), or mobiletest.me (website), and emulate an iPhone or iPad, the images appear horizontal and perhaps squashed.
The vertical stacking is more usable anyhow, but (1) I would like to know how to reliably test my website on iPhone, iPad, etc. without a physical device, and (2) I would also like to know why these tools and services aren't consistent with the device they're emulating?
UPDATE: Actually, this answer accurately mimicked the actual device, but can you answer my second question? I would like to be able to rely on Chrome Developer Tools.
These tools are not intended to "emulate", but to merely pass the correlating user-agent string for any site that may be sniffing the user agent for any reason (conditional CSS etc.) Browserstack.com or the physical device itself is a sure way to test sites consistently, but for a cost.
Real quick question here... I'm trying to style a public facing website. I've coded individual css files for the different browsers, but I've noticed that I've got some display issues when a user views the page from a mac OS... it's minor- just a footer background that's about 50 px too high, but it happens identically on FF and Chrome... both interpret correctly when viewed from Windows, but the same browsers from a Mac mess it up... this was one of the issues that initially got me to do differently tweaked...
Here's what I'm using for browser detection...
Dim browser As HttpBrowserCapabilities = Request.Browser
Dim bName As String = browser.Browser
If bName = "IE" Then...
Ok, So I'm thinking that the browser reports differently under these different circumstances, but there's only one mac in the company, and I'm having trouble finding a way to get what she sees to report to me, short of posting some kind of label... Does anyone know if there's a difference, and if so, what it is? what string I could look for so that I don't have to just throw mac users into an "else" category?
UPDATE
Well, I coded a little JS to give a popup for what the browser was reporting as... both FF and chrome reported correctly... so it seems that those OS's seem to interpret the CSS slightly differently, just like different browsers do? Does anyone know a trick for determining the OS a browser is coming from?
I need to create a page which will look differently on an ipad. I have never done this before so I have a few questions:
1) How can I make a page know its being viewed on an ipad for css purposes?
2) If some content on the page is different for an ipad, how can I use php to know what device is loading the page (because this can't be done with css)?
I'll start by answering your second question. The only way to detect a particular device type in server-side code is through user-agent parsing. In PHP, you could do this with the strpos() function, which returns FALSE if the second string parameter is not contained in the first. For example:
$userAgent = $_SERVER['HTTP_USER_AGENT'];
if (strpos($userAgent, 'iPad') !== FALSE) {
// load iPad-specific content
} else {
// load content for other devices
}
To answer your first question, there is no way to detect only an iPad using CSS. You could use media queries to target 1024x768 displays, but these would apply to any screen with that resolution (not just the iPad). If you want to apply iPad-specific CSS styles, load a unique stylesheet with the aforementioned PHP code.
However, it should be pointed out that device detection is generally a bad practice, since it will not account for changing browser capabilities, market trends, or user-agent spoofing. In most-cases, CSS media queries provide a more robust, forward-leaning approach to supporting various devices. Why? Because they target device types, rather than specific models. This means that your site can work well today on iPad, Android, and Windows tablets, and next year on whatever hot new xyz device hits the market (without requiring code changes).
http://css-tricks.com/snippets/css/ipad-specific-css/
http://thomasmaier.me/blog/2010/03/04/howto-css-for-the-ipad/
http://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes
this might help you it is well written article...
Use media queries to hide/display/change content for different devices.
I am working on 4 internal websites, everyone should be using IE but not everyone is.
Is there an easy way to force the user to use IE, ideally without installing anything new like JQuery?
Cheers,
Kohan
Addendum
I really shouldn't have to justify why i'm wanting to do this, but here goes.
This site is totally internal and 98% of the users do not have the rights to install a new browser... however there are a select few that do. This is fine for most of our sites, but since these sites are very old, they do not work in anything but IE. I could fix it for all browsers... but it is a better use of my time to just put a "hot-fix" in for now as it will likely all get rewritten next year. The site itself is also only used once a year. It's simply not worth the time investment in this case.
Thanks
Kohan.
If you really wanted to do this you could check the user agent of each request and if it's not IE redirect to a holding page explaining that they need to change browsers.
var userAgent = HttpContext.Current.Request.UserAgent;
Alternatively use the Request.Browser property.
if(HttpContext.Current.Request.Browser.Browser != "IE")
{
// do stuff...
}
You could find the browser type, and if its not IE, then do a Response.Redirect() to a generic "Use IE" page.
if (!(Request.Browser=="IE")){
Response.Redirect("UseIE.aspx");
}
You'll have to check the return values of Request.Browser though as I'm not certain without testing
I'll suggest something eretical: instead of fighting against Internet Explorer, force the users to use the Google Chrome Frame It's a "plugin" for Internet Explorer that make the page work as if they were in Chrome.
I'll quote from that page:
Google Chrome Frame is an open source plug-in that seamlessly brings
Google Chrome's open web technologies and speedy JavaScript engine to
Internet Explorer. With Google Chrome Frame, you can:
Start using open
web technologies - like the HTML5 canvas tag - right away, even
technologies that aren't yet supported in Internet Explorer 6, 7, 8,
or 9.
Take advantage of JavaScript performance improvements to make
your apps faster and more responsive.
Now your users can have IE 6.0 to work with their obsolete internal web applications AND you can work against a "unified" (you are programming only against Chrome) "modern" web browser.
I am developing website and it has to be viewed in tablet pc. Please suggest me what are things to be considered ? technology wise ?
also i need to know what are the tools i need to have to view in my intranet as well as.
A major issue: in many tablets there is no moving pointer - at least not in a fully usable form. That means that tooltips may not really work, and image maps must be really clear, since there is no highlighting until the user actually "clicks" on the link.
Well, actually that's not fully accurate - if the user drags the pointer, it should work like a regular mouse pointer. The problem is that most users avoid dragging and just tap where they want to click directly.
Best piece of advice I can offer: get an actual tablet PC and try browsing your site. Most major issues will be evident almost immediately. If you are able, get a regular tablet/pad user to beta-test your site without trying it out on a desktop PC - they would be able to see issues that you would miss due to your prior knowledge of the site.
The Tablet PC is a standard Windows machine, therefore it has the same browser support as any other Windows box. So there isn't any special technology required.
There are however some design considerations:
First, make sure your layout has plenty of empty space surrounding iterative elements. Crammed pages are tough to navigate with a stylus, and if it is one of the newer models that also support touch it is even more of an issue.
Second, most Tablet PCs are configured with the default font size set for 125%. You want to make sure that your web pages scale correctly and don't end up requiring horizontal scrolling to see the full width of the page.
A second point regarding scaling, Tablet PC supports both Landscape and Portrait modes. In other words, it can be 1024x768 OR 768x1024. You'll want to make sure that your user experience is acceptable in both modes.
One thing i can think of : there is no 'hover' on most tablets, and if it's there at all, likely nobody will see it.
Not all tablets support flash, but they do all support javascript, and Prototype.JS or jQuery will run on them in most cases