I have a mobile website. I need to detect mobile web browsers by screen size or resolution and display the website accordingly.
Can anyone help with detecting web browser and screen size?
Also, how can I open my website according to the screen size?
I suspect that you don't mean a WAP browser but rather a mobile browser. (As you've tagged your question with iPhone & Android.)
You need to use a device capability database to do this on the server side.
There are lots of options (see other answers and link below), but as you're using ASP.NET, I'd recommend looking at http://51degrees.codeplex.com/. This uses WURFL data and is the defacto replacement for MDBF (which used to be the best asp.net solution).
More information on using the 51degrees solution can also be found in blog post by Scott Hanselman and Steve Sanderson.
There are lots of other similar questions about this here on SO: https://stackoverflow.com/search?q=detect+mobile+browser+capabilities
For the detection part, I recommend to use WURFL. There is also a similar question/answer on SO.
For the resize part, I recently did something similar for a web application of us. I tried to keep it really simple and make the elements floating/dynamic resizing.
To test it, there are several emulators available, I used those for BlackBerry, Android, and Windows 7 Phone.
You can use DeviceAtlas for this: http://deviceatlas.com/
I use Mobile Device Detection and Redirection from 51 degrees.
Here are the properties that you can use:
Request.Browser.IsMobileDevice
Request.Browser.ScreenPixelsHeight
Request.Browser.ScreenPixelsWidth
Related
I have an old ASP.NET web application (Web Forms, no MVC) and I would like to make it "look nice" in mobile browsers, while keeping the current design for desktop browsers.
One of my options is CSS media queries , but then - is there a list of standard screen sizes I should adapt it for?
I also read about Modernizr - but it seems to just detect browser capabilities, and I wouldn't know how to use it for my purposes.
What would be my best bet? Appreciate it.
You should take a close look at jquery-mobile which has a lot of built in functions to deal with both changing the display based on device as well as a variety of layouts pre-optimized for mobile views.
Take a look at this link for way more information : http://jquerymobile.com/
However this would not necessarily be easy, depending on the complexity and overall layout of the "normal" web page. However it could easily be implemented to judge what device is being used and then switch to an already defined layout.
I recurred to CSS media queries. Here's a nice introduction. Much appreciated.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Yesterday i got a requirement from my senior saying that they want to view pages which are in asp that should be properly rendered on BlackBerry device. I know it will work but it will ugly... but after googling i have found about asp.net mobile pages that will work for my requirement..... but are there any more options available which will reduce my development effort.
regards,
Rick Jackson
There shouldn't be any difference in what language the site is programmed in. How the client (in this case a phone) interprets it is entirely based on what it is sent: html, css, and javascript. One popular client-side framework for mobile development is http://jquerymobile.com/. Its goal is to:
unify user interface system across all popular mobile device
platforms, built on the rock-solid jQuery and jQuery UI foundation.
To see a great example of mobile/responsive design: go to http://jquerymobile.com/demos/1.0b3/, and change your browser width in and out. Notice how page elements move around based on your screen size? There are different css rules that apply based on the max-width of the browser window. So the solution is baked right into the site.
Other than a framework, the foundation of mobile development is creating semantically correct (and not too verbose) markup that a mobile browser can parse. This means good classic html, small optimized images, percentage based sizes, etc..
Smashing magazine has a great round-up of intro -> advanced articles on modern mobile development : http://www.smashingmagazine.com/guidelines-for-mobile-web-development/
In case that you havn't found the material, this is asp.net mvc 4 mobile features tutorial.
You can also watch the video tutorial from Phil
I want to redirect some URL to mobile version, if the user agent is a mobile.
Example :
klikkarir.com/jawa-pos/5215/lowongan-call-center-accounting-administration-pt-asia-teleservices-januari-2010.html
will redirect to :
m.klikkarir.com/5215/lowongan-call-center-accounting-administration-pt-asia-teleservices-januari-2010/
somebody help me.
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.
The best method is to use WURFL to detect if a mobile device is hitting your page, several (php,java,c++) interfaces exist.
If you want to have simpeler but less accurate solution a quick useragent comparison might be sufficient, example.
You could try the Mobify Me service, there is a free version too.
Off topic, Start accepting answers
I believe there are three ways to go about this first detecting the screen size by number of pixels. I have tried this method and It works within parameters (HD and high resolution screens on mobile devices vs older low resolution desktop screens) another approach suggestion several places (http://www.inmotionhosting.com/support/website/how-to/mobile-redirect) is to use the .htaccess file. The idea here is to screen browsers on their acceptance of mobile MIME types - as I suspect there is no great push for full screen devices to take mobile MIME types this seems fairly reliable with the caveat that on tablet devices you may get the mobile version when they are capable of handling the main version. The third of course is to use the script solutions noted above.
Luck
DPR
I have an existing website that I need to develop a small portion of for mobile devices. For reasons that are not in the scope of this entry - I am using the Microsoft platform and tools - VS2008, ASP.Net, VB.net, .Net AJAX Framework, jquery.
I have 2 questions:
What is the best page size (Height and Width - mostly width) to make the pages as I do not know what devices will be accessing the mobile portion of the site. I can detect if they are mobile devices and direct them accordingly to the mobile portion but I do not want to write customized content for each mobile device - so I would like to create something that will be sort of a one size fits all mobile app.
Any suggestions or links for Mobile Web development in the .Net 3.5 framework environment?
Thanks
Your average mobile device still has a very small screen resolution.
A quick google found a number of sites listing this sort of thing, or pointing to lists, the best one I saw was:
Cell phone screen resolution by Brand and Model
or for a better idea of average:
Cell phone screen resolution, sorted by size
As for building the mobile version, I'd start with System.Web.Mobile, and work my way on from there - taking in System.Web.Ui.MobileControls, and also their walkthroughs.
And can I say "thank you for thinking of us"? As a user of the "mobile" internet, it's always a pain to come across a heavily javascript enabled site (I'm looking at you SO) that doesn't work on my phone (Windows Mobile 6.1, with Opera Mobile 8.5 installed) because of limited (or percived limitations) in the JS support.
Just had another thought - with everyone talking about DRY - looking into an MVC framework would be a really good thing to do - then your controllers can all be the same, and just return a modified view based on the browser caps - Scott Hanselmann included a bit about this in his MIX talk, all good stuff.
I knew I had more here.
Scott also had a podcast (ASP.Net and the mobile web) on this, and the Mobile Device Browser Files are on codeplex
We are developing a mobile app right now as a separate application. The reason for this design decision is that we won't use our existing pages because they contain too much information. So while Scott has a point about being "DRY" to an extent, it is not an accurate generalization to make.
Mobile apps should be optimized for really small screens and low bandwidth. Reduce images, JS files, etc. as much as possible. This will improve the user's experience. The best thing you can do is to get a mobile device or some simulators and check out how they perform/look on those devices. Here's a cool one for iPhone.
Also, keep in mind that many mobile users only use mobile apps for a few minutes - and only to get to critical information quickly. Your app should make it easy for the user to access only the information they need with the lowest amount of few clicks and page loads.
Ideally you should be developing pages that work regardless of screen size. Creating separate pages for mobile devices means having to update things in two places when they need to change. This goes against the principle of don't repeat yourself. Create a stylesheet using the handheld media type to serve your content to mobile devices. This allows you to reposition the elements into a single-column format quite easily. Just beware that many mobile devices will report to the server that they accept both handheld AND screen media types, because they are trying to offer a consistent user experience with the desktop. You will likely need to override some screen rules in your handheld stylesheet.
There are several distinct display sizes that is worth considering when you build up your XHTML+CSS templates.
They are as follows (width in px):
120 - I suspect there is no need to worry about smaller displays than 120px. Less than that would probably have to be served in WML anyway.
128
176
240
320 - probably the largest width you need to worry about at the moment.
All variations should be suited with these widths. Also consider setting the width with something around 10px less than the view port (e.g. 240 must be 230). Same goes for images. That is necessary because of the scrollbar which is shrinking the viewport even more on many mobile browsers.
There is no need to worry about height, as with normal browsers, that is not a concern - one can always scroll down. However, a good advice might be to keep pages relatively short.
Oh, and I will point you out WURFL, although I haven't used it myself, perhaps you might find it useful.
MSDN makes it sound so easy to detect a mobile browser:
if (Request.Browser["IsMobileDevice"] == "true" )
{
Response.Redirect("MobileDefault.aspx");
}
Actually, it looks like you can also just check Request.Browser.IsMobileDevice. But how does this actually work? I don't even have a .browser file... what's going on behind the scenes here? Are there some built-in defaults for ASP.NET 2.0?
A number of *.browser files are shipped with .NET:
C:\Windows\Microsoft.NET\Framework\v2.0.50727\CONFIG\Browsers
The runtime uses regular expressions from the *.browser files to match against the incoming User-Agent string, and then sets a bunch of properties based on each match it finds (there can be several in the hierarchy).
If you need in-depth mobile device support, consider installing the MDBF, which adds support for about 400 devices:
http://mdbf.codeplex.com/
Now, after 4 years, it's even more simple
Request.Browser.IsMobileDevice
Since for most sites, it is actually the size of the screen that matters and not so much the capabilities (at least when talking about modern phones with things like Safari and Chrome on them) wouldn't checking the resolution make the most sense?
Request.Browser.ScreenPixelsHeight
and
Request.Browser.ScreenPixelsWidth
I wouldn't rely on the MSDN link, there is no common standard unfortunately for mobile browsers and many try to mimic their non-mobile counterparts. Also it will return true if it doesn't recognize. See this link.
My current understanding is that there's just one exact solution to the problem of detecting whether a browser is mobile and next detecting its real capabilities. This solution is ScientiaMobile's WURFL (http://www.scientiamobile.com). Which, as of Aug30, is no longer free for every use. WURFL is now released with an ASP.NET API under AGPL. The data repository also comes with a specific license that disallows both copying and using with APIs different from the standard one (unless one purchases a commercial license).
So for practical purposes other approaches such as 51Degrees cannot be used with more recent and future versions of the WURFL repository and this will make it difficult for 51Degrees to detect new devices (Windows Phone 7.5, for example).
As for MDBF (a dismissed project), it may still work to detect whether a device is mobile (much better than the IsMobileDevice in ASP.NET). It is not entirely reliable as far as properties of the device are concerned. It insists that my HTC Desire Android has a 240x320 screen size, which is patently incorrect.
My company bought a WURFL license and we're absolutely OK with that.
Issues has been resolved while I added 51Degrees, just add 51degrees using Nuget thats all. See more here https://51degrees.codeplex.com
Simply use below code,
if (Request.Browser.IsMobileDevice)
{
Response.Redirect("MobileDefault.aspx");
}