Hei, yritän tehdä sivustoa, jossa on css-tiedosto mobiilille ja toinen css-tiedosto muille näytöille. Saan tämän toimimaan Operassa, Chromessa ja Firefoxissa. IE heittää kaikki muotoilut pois.
Pitäisikö tähän liittää joku IE:lle luotu koodinpätkä vai mitenkähän tämän ongelman voi selättää?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Viestintä Skrivaus 2012</title> <!--mobiili--> <link href="./css/mobiili.css" rel="stylesheet" type="text/css" media="only screen and (min-width:0px) and (max-width:320px)"> <!-- main --> <link href="./css/main.css" rel="stylesheet" type="text/css" media="only screen and (min-width:321px)">
Mod. lisäsi kooditagit!
MSDN:ssä lukee, että vasta IE9 osaa tuollaiset media queryt. Vastaavasti Firefoxissa tuki on ilmeisesti versiosta 3.5 alkaen, eli ei sielläkään tuki ole selviö.
Kannattaisi varmaan laittaa esimerkiksi main.css sivulle oletustyyliksi (ilman querya) ja sen perään sitten noita erikoisempia.
Jotenkin tulisi mieleen ettei IE edes ole ainoa selain jossa noi ei toimi.
Aihe on jo aika vanha, joten et voi enää vastata siihen.