I'am having trouble changing CSS file paths if the end user is accessing my site via a PC or mobile device, below is my CSS, I thought that it would redirect the user if using any handheld device:

<link rel="stylesheet" type="text/css" href="/css/style.css" />  
<link rel="stylesheet"      type="text/css"  href="/css/mobile.css"   media="handheld" />

Please can someone let me know if this is the correct way or should I be using javascript to manipulate my file path>

I'am having trouble changing CSS file paths if the end user is accessing my site via a PC or mobile device, below is my CSS, I thought that it would redirect the user if using any handheld device:

<link rel="stylesheet" type="text/css" href="/css/style.css" />  
<link rel="stylesheet"      type="text/css"  href="/css/mobile.css"   media="handheld" />

Please can someone let me know if this is the correct way or should I be using javascript to manipulate my file path>

• javascript
• jquery
• html
• css
• mobile

• 4 media queries! :) htmlgoodies./beyond/css/… – Pogrindis Commented Oct 24, 2014 at 20:19

2 Answers 2

Dont make life too hard on yourself going that route of detecting a browser and device type..

Go with Media Queries..

@media only screen and (max-device-width: 480px) 

All devices are now all well known but regardless the resolution will determine the css style you offer the client..

A Lot more can be found here : MediaQueries

I would suggest MAYBE bootstrap3 framework // foundation etc there are a lot to choose from but these are the top two which e with built in definitions and a good framework to write css for each!

What you want to focus on is the grid system..

such as Bootstrap They work of a col-size-n grid of 12 colums, responsive.

A Lot more documentation can be found there and it opens a world of other questions!

:)

Well, the proper way would be Media Queries.

As mentioned by another individual on your question, if your truly trying to utilize Javascript:

function Resize() {
     width = window.innerWidth;
     height = window.innerHeight;

     if(width < 1200 && height < 600) {
          // Modify particular Stylesheet elements.
     }
}

Obviously you can do measurement / parison:

• Browser Inner Width / Height
• User Agent

Those are two examples, but really Media Queries would be ideal and proper. Won't go into detail on those Media Queries, since someone went into more detail.