Using a different CSS depending on browser?

Question

I understand that the newest version of SSI has the ability to switch from one CSS to a more mobile friendly CSS based on window size. Can something similar be done for older versions? I can write the CSS, but am trying to figure out how to tell survey which file to use. I imagine it is something in the head tag including this:

TextExists(UserAgent(),"iPhone") or TextExists(UserAgent(),"iPod") or TextExists(UserAgent(),"BlackBerry") or TextExists(UserAgent(),"Android") or TextExists(UserAgent(),"SymbianOS") or TextExists(UserAgent(),"Teleca") or TextExists(UserAgent(),"IEMobile")

Maybe combined with something such as this (This is was a piece of code written for someone trying to use a different CSS based on their "id", so I realize it will be different):

[% Begin Unverified Perl

if (VALUE("id") <= 100)
{
return "<link rel='stylesheet' type='text/css' href='" . GRAPHICSPATH() . "style.css'>";
}

End Unverified %]

Any insights would be greatly appreciated! Thank you!

Answer 1

I understand in v8 the screen size of the respondent's device is reviewed. If less than 600 pixels it is assumed to be a mobile or handheld device and in this situation the mobile CSS file is selected for displaying the questionnaire.

With regards to the UserAgent system field, it can in some cases detect the type of respondent device by including a device description (e.g. BlackBerry, iPhone, etc.) within the text. By using the TextExists function (as you have shown in your example) you can extract the device. The problem is it doesn't do this for all cases. I believe this is a service provider and/or a device problem rather than a Sawtooth problem.

Therefore you will need to incorporate an "else statement" for the selection of the default CSS file to be used if the device is unknown.

Comments

Hi Paul,

Thank you for your response. That all being known now, would it just make more sense to use the same logic as V8, and base the css used on the screen resolution? Any idea what such code would look like?

---

This is where I am at currently, it loads the second style sheet to matter the screen size though. At least on my cell phone it is not loading the cellstyle.css

<script type="text/javascript">

function getcss(cssfile){
loadcss = document.createElement('link')
loadcss.setAttribute("rel", "stylesheet")
loadcss.setAttribute("type", "text/css")
loadcss.setAttribute("href", cssfile)
document.getElementsByTagName("head")[0].appendChild(loadcss)
}

if(screen.width <= '600')
// Defines the resolution range you're targeting (less than 600 pixels wide in this case)

{

getcss('/graphics/cellstyle/cellstyle.css')
// Defines the .css file you want to load for this range (cell.css)

}

else

{

getcss('/graphics/otherstyle/otherstyle.css')
//This else statement has "if" condition. If none of the following criteria are met, load the standard dhmstyle.css

}

</script>

---

I got this to work by replacing "screen.width" with "window.outerWidth" Problem solved!