无法加载“移动” CSS？

Question

i currently have this code working on my website:

<script>
if (window.top!=window.self) { 
    loadCSSFile("http://www.website.com/css/iframe.css");
} else { 
    loadCSSFile("http://www.website.com/css/style.css");
}
</script>

I am looking to fix this as i want to load three files but only if required? hoping you use php or add to the script above, currently this loads normal Css and CSS for Iframe (Facebook Apps) and now i want to style the mobile css, but with one file mobile.css i need to add a file to the above or a php code that handles this?

Cheers!

Answer 1

<link rel="stylesheet" media="(max-width: 800px)" href="mobile.css" />

请不要为此使用JS。

Answer 2

If you to load a CSS to style for mobile devices you can use the following code. This will detect that the device is a mobile by looking at the screen size and if it matches then it will load the css.

<link media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="mobile.css" type="text/css" rel="stylesheet" />