Question

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.