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.
Related
I'm trying to find out if it will be a better use of my time (now and in the long-run) to make a separate style sheet for my mobile site (which will look drastically different, but use the same database information and elements), or , make a whole new mobile page and steal what I need from my desktop site.
Does anyone have an advise or know what most developers practice when it comes to mobile sites?
you can use media queries.
<link rel="stylesheet" media="screen" href="style.css" type="text/css" />
<link rel="stylesheet" media="handheld" href="mobile.css" type="text/css" />
Or in css3
http://www.w3.org/TR/css3-mediaqueries/
A lot of sites these days are concentrating on mobile first, then porting to a full web app for desktops. More and more peyote are using their mobiles to browse the web and a site designed for mobile will generally support desktops better than a desktop site will support mobile browsers.
I read about device.is at HTML5 rocks here: http://www.html5rocks.com/en/mobile/cross-device/
There's a lot of controversy in that. I personally prefer media queries. and it they aren't TOO complex, I put them right in my css file using #media FOO and ( max-size: ### ) { /*stuff*/ }
A "mobile website" usually like m.domain.com, is usually a very stripped down version. containing some products, info, and a way to contact.
Why would you hide the rest of your valuable site info just because someone is on a smaller device? the load time can be a bit longer since there is more content, just make sure you super important stuff is above the fold. (or at least higher up in the draw order)
You can also very easily include click to call and click for map buttons that appear at a certain size using media queries.
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'm using
<link href="stylesheets/mobile.css" rel="stylesheet" type="text/css" media="handheld" />
To include an alternate stylesheet for mobile devices. But it seems that the stylesheet is not being loaded at all on my HTC. Why is this? And more importantly, how do I make sure my mobile stylesheet is loaded on all handhelds?
You can view the live website here: www.webvalid.nl/thomas
Thanks in advance!
I'd recommend using the CSS3 #media screen and (max-width: ###px) media queries as documented nicely at http://webdesignerwall.com/tutorials/css3-media-queries
All HTC (Android ones, anyway) and iPhone browsers support this, as far as I know, due to their good CSS3 support.
What should i do so that my website fits properly for different screens.. for example 32" 24" 17" monitors as well as for mobile device(netbooks etc.) with 9" - 11" screens and mobile phones that have anywhere between 2.5" - 5" screen?
How should i design the layout of my homepage/template etc. What should i keep in mind... what would i require for this css, javascript or server languages to read the type of device?
Any other recommendations you'd like to suggest to make the site accessible and usable for various types of devices.
Thanks in advance for all your help.
there no need to write js you can did it simply with CSS. In meta we define that the website adjust according the viewport of the device & also if you want to change in design then write different css for the things which you want to change for example:
for mobile device
<meta name="viewport" content = "user-scalable=no, width=device-width" />'
<link rel="stylesheet" media="all" href="stylesheet/iphone.css" type="text/css" />;
for window resize
<link rel="stylesheet" media="all (min-width=960px)" href="stylesheet/iphone.css"
type="text/css" />;
<link rel="stylesheet" media="all (max-width=960px)" href="stylesheet/iphone.css"
type="text/css" />;
For more information must saw these link's http://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes , http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm
Nothing personal sandeep, but most of the answers to mobile web design questions here are only targeting iPhone or Android. Mobile internet is not just iPhone or Android. There are many devices (in fact more than iPhone and Android put together) that doesn't understand view-port or media queries and active on the mobile internet
If you want to be accessible as many devices as possible.
design light weight pages
do not use horizontal layouts. such as 2-3 boxes next to each other.
make everything vertical so they would fit on small screens
do not use heavy java-script, avoid it as much as possible
do not use too many graphics
avoid using min-width and/or max-witdh in your css
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