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.
Related
First of all I know that this question was asked a lot before, but every answer was false or outdated.
Here is my problem: I want to load different CSS files based on device width. Here is the answer that is always given and that is false:
<link media="screen and (min-width: 721px)" rel="stylesheet" href="./cs/styles.css" />
<link media="screen and (max-width: 720px)" rel="stylesheet" href="./cs/styles-min.css" />
The problem with this answer is that the both files are loaded --->> both files are sent to us on HTTP request. Here is the proof on mozilla:
My question is how do I get only one to be loaded/sent to us on HTTP request. Btw I don't want to use js or server-side language if not necessary, if I really really have to, thats ok but give me reasons why your way is better. Thanks a lot!
Why don't you try using media queries in your css file. Only one css file is needed, and you specify when the screen size is smaller, then the style wrapped inside media queries will override
IE 9+, Firefox 3.6+, Safari 3+, Any Chrome, Opera 10+. Mozilla suggests starting the media attribute of the with “only” which will hide the stylesheet from older browsers that don’t support media queries. That may or may not be what you actually want to do… case dependent of course.
<link rel='stylesheet' media='screen and (max-width: 700px)' href='css/narrow.css' />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
<link rel='stylesheet' media='screen and (min-width: 901px)' href='css/wide.css' />link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css"/>
Are seen this ref : https://css-tricks.com/resolution-specific-stylesheets/
Demo : https://css-tricks.com/examples/ResolutionDependantLayout/example-one.php
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 was thinking the link target on the stylesheet would make my css file only load when it loads on a tablet or iphone. But the elements I'm trying to hide are still there. Im currently using (media="handheld")
<link rel="stylesheet" type="text/css" hrf="css/media.css" media="handheld" />
There are too many mobile device models out there to write stylesheets for; you'd be better off adjusting your CSS based on Screen Size.
This is especially helpful for targeting Android Tablets which comes in different sizes.
See this useful tutorial for further explanation:
http://css-tricks.com/resolution-specific-stylesheets/
So, instead of targeting a specific screen dimensions (which would keep changing as more devices are released), you'd want stylesheets that change according to the screen size.
Then you'll add several stylesheets:
<link rel="stylesheet" media="screen and (min-width: 480px) and (max-width: 700px)" href="css/small.css" />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
etc.
So iPhones would use the small.css, and tablets larger than 700px will use medium.css.
Handheld is more for devices like PDAs or feature phones than iOS or Android devices. You're much better off using media queries to detect device capabilities and then adjust accordingly. Here's an example article: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
I have included some media queries in my design to change the width of some elements of the page based on the browser's width. The queries look like this:
#media screen and (min-width:1024px)
#media screen and (max-width:1024px)
Chrome, Safari and Firefox work great, only IE is a problem. I know that all versions prior to IE 9 don't support this feature, but they don't work in IE 9 at all. What might be the problem?
Do you have compatibility mode turned on?
Make sure you have right DOCTYPE declaration.
It's strongly recommended that websites use the HTML5 document type in order to support the widest variety of established and emerging standards (in this case: CSS3), as well as the broadest range of web browsers: <!DOCTYPE html>
use the following conditions
#media only screen (min-width: 1px) and (max-width:599px)
instead of
#media only screen (max-width:599px)
and make sure min-width is 1px as IE9 doesn't pickup 0px
Unfortunately min-width is simply not supported in any version of IE. So if you use this convention:
<!--- CSS Selector :: Desktop --->
<link rel="stylesheet" type="text/css" href="css/desktop.css" media="screen and (min-width:960px)" label="desktop">
<!--- CSS Selector :: Tablet PC --->
<link rel="stylesheet" type="text/css" href="css/tablet.css" media="screen and (min-width:768px) and (max-width:959px)" label="tablet">
<!--- CSS Selector :: Phone --->
<link rel="stylesheet" type="text/css" href="css/phone.css" media="screen and (min-width:320px) and (max-width:499px)" label="phone">
It will ignore it all.
Reference.
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.