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.
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 am building a PhoneGap/Cordova project for iPhone.
I have 2 css files - one for general CSS rules and one for iPad relevant css that look like this:
<!--Main Style Sheet-->
<link rel="stylesheet" href="css/styles.css" />
<!-- iPad specific css-->
<link rel="stylesheet" media="only screen and (max-device-width: 768px)" href="css/ipad.css" type="text/css" />
The issue is that the iPad css is just behaving like normal css. CSS I put in there appears when I run both iPhone and iPad simulators.
Can anyone help me out?
Thanks!
For iPad you want min-device-width, not max-device-width (ie. an iPad has a minimum width of 768px in Portrait mode)
max-device-width gives us a maximum not a minimum, so it will affect all devices below 768 px including the iphone. Giving a min width too should fix it. Probably (min-device-width:481px)
In case the aforementioned solutions do not solve the problem for some readers, this question is directly relevant to responsive web design.
I would recommend utilizing only one style sheet with a media query inside of it.
#media screen and (max-width:768px){
/* Device Specific CSS rules here */
}
I have chosen max-width here because anything above that will render the normal CSS. You my then set up another media query with max-width of approximately 500px to target smart phones. Keep in mind that the media query automatically inherits all of the normal CSS rules specified and the only rules that need to be defined inside of the media query is the device specific styles.
This does exactly the same thing; however, this only requires the browser to parse one style sheet, generating a faster load time (minimal, but faster none-the-less.
When using a media query, you are also required to have a viewport meta tag in your HTML. Otherwise, your devices will render the same CSS as a desktop.
Also, CSS3 Media Queries are supported by most modern mobile browsers.
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've just discovered CSS #media queries and I think they're great! However, I know that not all browsers support them (namely all but the most recent versions of I.E.).
What should I do then, in my default stylesheet? Should I target a normal-sized screen? Should I go route of lowest-common-denominator and load the mobile stylesheet? Or should I make the design completely fluid?
What is generally a good plan when making the default stylesheet for browsers that don't support #media queries?
It depends on whether you go with de 'mobile first' approach or 'desktop first'.
The desktop first should not cause any trouble with desktop browsers not supporting #media, because they will just ignore the mobile stylesheet rules, like they should. The only problem is mobile browsers that don't support media queries. They will render the page like seen on desktop. But most smartphones support media queries, except pre-win7 phones. The question is if you want to support those phones.
You stylesheet should look something like this.
body {
width: 960px;
margin: 0 auto;
}
#media only screen and (max-width: 500px) {
/* override desktop rules to accommodate small screens*/
body{
width: auto;
margin: 0;
}
The other approach is mobile first. You create a base stylesheet for mobile, and then use mediaqueries to spice thinks up for desktop users. You can put the desktop rules in a separate file, and use media queries and conditional comments to load it in modern desktop browsers and IE. But here the problem is IE mobile also supports conditional comments, so no pre-win7 phone support. Your html should look something like:
<link rel="stylesheet" href="/css/basic.css" />
<link rel="stylesheet" href="/css/desktop.css" media="all and (min-width: 500px)" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="/css/desktop.css" />
<![endif]-->
Making your design fluid will help a lot. The aim is that no matter what screen size, your site will always look good. Just resize your window to try it out. Fluid designs can't make your sidebar move to the bottom if the screen is to narrow. For this you need mediaqueries.
Good luck