JavaScript Newb - Screen Width and CSS, ARGH!

Question

Hello,

I'm trying to write a bit in Javascript for a mobile website. I've searched all over Google and found some help, but I'm having some kind of problem implementing it.

In the HTML Header (note, no CSS file specified here):

<script type="text/javascript" src="scrnsz.js"></script>

JavaScript:

if (screen.width > 200) {
link = document.getElementsByTagName("link")[0];
link.href = "style.css";
}

if (screen.width <= 200) {
link = document.getElementsByTagName("link")[0];
link.href = "smstyle.css";
}

Can any pros help? :) Thank you.

Answer 1

To make that work, you'd need a lone <link rel='stylesheet'> instruction in your HEAD. The script will search for the first one it finds, and replace the href accordingly.

However, there are more ways and options to prepare a site for mobile browsers. Check out these SO questions:

• Web Site Designing for Mobile
• What are the quickest and easiest ways to ensure existing web pages display well on mobile platforms?
• designing web interfaces for mobile devices

there are many more discussions on SO dealing with this - check them out using the search.