pc and mobile site code using user agent

Question

I want to make it for my site, This is my question:

If the user is using a computer to view my web page the css should be

 <link rel="stylesheet" href="/pc.css" type="text/css" media="all" />

But if they use mobile the css should be

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

How will I do it. I want html not php

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries — Quentin, Feb 21 '14 at 15:04

score 2 · Answer 1 · answered Feb 21 '14 at 15:21

You could do something like this through media queries

<link rel="stylesheet" media="screen and (min-device-width: 1024px)" href="pc.css" />
<link rel="stylesheet" media="screen and (max-device-width: 1024px)" href="mobile.css" />

If you wanted to go the Javascript route for this

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 1024) {
        $("#size-stylesheet").attr("href", "css/mobile.css");
    } else {
       $("#size-stylesheet").attr("href", "css/pc.css"); 
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

You should really thank him by checking one as the correct answer. — justacoder, Feb 21 '14 at 15:35
If you have found this answer satisfied please click the check mark as an accepted answer. @ehis — Travis, Feb 21 '14 at 16:29

score 0 · Answer 2 · edited May 23 '17 at 12:10

It may be more reliable do accomplish this with media queries in CSS. Because some browsers do not have JavaScript enabled, especially mobile browsers, it is considered a best practice to support basic functionality without JavaScript. See this answer by Haylem for more.

A great explanation of CSS3 media queries is available in this SmashingMagazine.com article, "How to Use CSS3 Media Queries". In your example, you could quickly implement this as follows:

<style>
@import url(/pc.css) (min-width:480px);
@import url(/mobile.css) (max-width:480px);
</style>

Naturally this will not work in ancient versions of Internet Explorer, so you might need to consider this also:

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="/pc.css"/>
<![endif]-->

However, if you do not have strong experience with responsive web design (RWD), you may be better off considering a CSS framework like Foundation or Bootstrap. Check out this Mashable.com article for a good overview.

You might also want to check out HTML5 Boilerplate which is used in the more comprehensive quick start kit, INIT.

pc and mobile site code using user agent

2 Answers2