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.
Related
I am trying to adapt an HTML based app for Chromecast and everything is working fine, except that the ":focus" is not taken into account in the CSS.
I am using it to display differently some items (basically the equivalent of the "selected item").
The focus is handled properly (calling ".focus()" on some DOM node works fine), just the display is not done properly.
I suspect this could be intentional as there is no keyboard and such for Chromecast. I could always rewrite the whole CSS to add a "focused" class on the element, but rewriting the whole thing just for Chromecast as it is already working on a number of platforms seems a bad idea.
Is there a way to activate the support for ":focus" in the CSS ?
Is there a work around ?
Best Regards
JN
The idea behind the chromecast is not to have a UI in the way that you are describing; the "control/navigation" is on the second screen and the consumption of content (playback of media, for example) is on TV. As an example, consider the Google Play Music. User picks up her mobile device, navigates through albums and such on her device till she finds the desired content. During this interaction, the TV screen doesn't try to show the navigation that is happening on her device and that makes sense since she is not even looking at the TV; in fact, it would have been pretty difficult to look at TV (assuming it was mirroring her mobile display) and navigate on her mobile device; user doesn't want to move her eyes from one to the other while she is searching through her content. Finally when she finds what she casts that to TV and can listen to that on her TV. It is the same behavior with the TV and Movies app, Netflix and Hulu+ as well and it is strongly recommended you follow the same pattern.
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
how can I replace screen resolution when accessing some site from script? Is it possible to acces such data when own script connects to the server?
To give a very definitive answer:
You cannot change a user's screen resolution via the browser.
You cannot retrieve a user's resolution as part of any ordinary HTTP request. (i.e.: in PHP's $_POST superglobal)
You can retrieve a user's screen resolution using JavaScript, which can then be passed back to the server via AJAX.
As a best practice, your website should be resolution independent by means of a fixed, fluid, or elastic layout. Changing a user's resolution is a frustrating experience for users and makes a project operate badly.
Keep in mind, also, that many platforms cannot have their resolutions altered. Most mobile devices, embedded platforms, and video game consoles have fixed resolutions. Also, projectors and televisions usually have very specific resolutions at which they function properly, so adjusting the resolution on these devices would likely wreak havoc.
As an alternative to adjusting screen resolution, check out em-driven layout. An em is a unit of measure in CSS that is relative to the current font. This allows you to dynamically adjust the sizing of your layout and its contents by adjusting the font size of the document (a larger font size will increase the pixel-for-pixel sizes of everything else on the page).
It should be noted that adjusting resolution can be accomplished via ActiveX on Windows, but only after multiple security warnings (and it only works on Windows in IE). This should not be attempted under any circumstances.
Here is my answer if I understood your question correctly. It is not possible to change screen resolution for a user when he/she accesses your site.
Are you saying that the site is changing its behavior based on what it thinks the user's screen resolution is? That's a) bad behavior, and b) client-side, so done with JavaScript or an ActiveX control or the like.
If you want your script to mimic that, it'll have to interpret the JavaScript, run the ActiveX, or whatever.
Sites don't have their own "screen resolution". They're rendered to whatever size the browser is at. That's part of the beauty of HTML.
While Handheld option is available in CSS then why some people use different subdomain and make different site for mobile?
I second what Justin Niessner said. Also, the mobile version of a site is usually structured differently from the "main page". Other content may be displayed on the front page, an only a selection of menu items, or a whole different menu altogether. Videos have to be embedded differently, images as well, Javascript effects altered and so on. Using different style sheets mostly just won't cut it.
My guess is to make the distinction more apparent to the user.
That, and the Blackberry Browser (and possibly the iPhone) identifies itself as a mobile device (depending on settings)...but could theoretically be able to display the full page. Using CSS, you're also depending a lot on the mobile browser to do the correct thing with your page.
You'll provide a much more reliable interface if you let the user specify the experience, not the site.
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.