ПК и мобильный код сайта с помощью пользовательского агента

Question

Я хочу сделать это для моего сайта, Это мой вопрос:

Если пользователь использует компьютер для просмотра моей веб-страницы, CSS должен быть

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

Но если они используют мобильный CSS-код должен быть

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

Как я буду это делать. Я хочу html не php

Answer 1

Это может быть более надежным сделать это с помощью медиа-запросов в CSS. Поскольку в некоторых браузерах нет встроенного JavaScript, особенно мобильных браузеров, считается лучшей практикой поддержки базовых функций без JavaScript. См. this answer by Haylem для получения дополнительной информации.

Отличное объяснение медиа-запросов CSS3 доступно в this SmashingMagazine.com article, "How to Use CSS3 Media Queries". В вашем примере, вы могли бы быстро реализовать это следующим образом:

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

Естественно, это не будет работать в древних версиях Internet Explorer, так что вы, возможно, потребуется рассмотреть это также:

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

Однако, если у вас нет сильного опыта в гибком веб-дизайне (RWD), вам может быть лучше рассмотреть рамки CSS, такие как Foundation или Bootstrap. Выезд this Mashable.com article for a good overview.

Возможно, вы также захотите ознакомиться с HTML5 Boilerplate, который используется в более широком комплекте быстрого запуска, INIT.

Answer 2

Вы могли бы сделать что-то вроде этого через средства массовой информации запросов

<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" /> 

Если вы хотите, чтобы идти по пути Javascript для этого

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()); 
    }); 
});