We want to use the same page to service the desktop, iPhone, and BlackBerry, so we have to come up with a way for the different devices to load different stylesheets.
So, is there a way to specify a stylesheet to run on BlackBerry?
For example, iPhone's use the media attribute:
<link media="only screen and (max-device-width: 320px)" href="style.css" ...
I would parse the User Agent string using a server side language and serve the correct stylesheet. The blackberry seems to identify itself with "Blackberry/xyz". See e.g. here
Related
This is an awesomium-specific question. I am trying to make something that does screenshotting of websites for testing purposes. I need to be able to simulate mobile devices such as an iPhone or Android device. To this end, Awesomium is great but I would need to be able to set the device-width for the purposes of CSS media queries. Eg:
<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />
Is this possible?
Yes, it is possible.
Unfotunately Awesomium has a nasty bug. Still not fixed now on Awesomium 1.7.3.0.
If HTML tag has properties, page won't work with media queries:
<html lang="ru-RU">
But you remove properties, it should work just fine:
<html>
I have two style sheets for one page.
<link rel="stylesheet" href="css/lsharecomplete_mob.css" media="handheld" type="text/css" />
<link rel="stylesheet" href="css/lsharecomplete_dt.css" type="text/css" media="Screen" />
I am testing on android and Iphone, and both seem to be picking up the "screen" style.
Is it better to use #media in one style sheet instead of using alternate sheets or am I doing something wrong.
I have checked the link and server directories to make sure the files existed and where linked properly.
iPhone's Mobile Safari doesn't consider itself of the "handheld" media type.
iOS ignores print and handheld media queries because these types do not supply high-end web content. Therefore, use the screen media type query for iOS.
Source.
Instead, use media queries.
You have to load the handheld style AFTER your standard style. Otherwise everything from your mobile design will be overwritten.
My customers' website works fine in all major web browsers. Except for the iPad. Some things render a little bit differently.
I'm using the following conditional stylesheet
<link href="{$SkinDir}/ipad.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 600px) and (max-width: 1024px)" >
It now fixes the iPads' stylesheet problem that I had....
BUT
The site worked fine on other devices such as my HTC Phone. But now that the iPad stylesheet has been loaded, it is now reverting to that stylesheet.
I tried using :
<link href="{$SkinDir}/phones.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 600px)" >
But it hasnt seem to have cascaded to the phone handset at all, It is still referring to the ipad stylesheet.
Is there any way at all, I can just target the iPad!?
It is worth noting that the site is running on a SMARTY Templating engine. The file that relates to the conditional stuff can be found here
Many Thanks in advance.
Do the conditional css < link > on the server level (php), rather than the client level.
you can use this http://shaunmackey.com/articles/mobile/php-auto-bowser-detection/ to detect the iPad and set a flag so you know which css to include.
I have one webpage that I want to pull different stylesheets for print, mobile, screen, etc.
I have screen and print working perfectly. I have two different stylesheets for mobile - one for modern smartphones (iPhone/Android), one for Blackberries. They're called mobile.css and blackberry.css respectively.
How can I simply have my page load the mobile stylesheet when iPhone/Android accesses the page, and the blackberry stylesheet when most Blackberries load the page?
Using max-width: 480px will work, but it will also force the mobile stylesheet upon a Blackberry (whose screen is also 480px wide), which is undesired behavior.
Any help?
For Printing:
<link rel="stylesheet" href="print.css" media="print">
For targetting the Blackberry specifically, you may have to do some User-Agent sniffing.
Does anyone know a way to have specific CSS style sheets based on the type of Mobile Device? I have been researching it a few days now and haven't found anything except this snippet of code for iPhones.
<link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />
This works great for iPhones, but on all other mobile devices (android, blackberry, Nokia), it's still displaying the same as my site. I tried:
<link media="handheld" href="iPhone.css" type="text/css" rel="stylesheet" />
but that didn't seem to have any effect on the other mobile devices. So I'm not sure how to reach the blackberry's/androids/nokia's without effect the code of my actual site.
I'm building my site using the PHP framework CodeIgniter and I looked into this code which is suppose to be able to tell if it is being looked at through a mobile device or browser.
if ($this->agent->is_browser())
{
$agent = $this->agent->browser().' '.$this->agent->version();
}
elseif ($this->agent->is_mobile())
{
$agent = $this->agent->mobile();
}
else
{
$agent = 'Unidentified User Agent';
}
The only problem is that the newer phones we are building on render the site as a browser and not as a mobile (I think, I've only tested the iphone because it's all I have at the moment). So does anyone have any work arounds for the other phone platforms?
A List Apart have a great article on their Web site all about mobile stylesheets. I hope it helps.
Interfacing with WFURL is supposed to be the usual practice for finding out the screen size and selecting the correct style sheet.