PC和移動網站代碼中使用的用戶代理

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）方面沒有很強的經驗，你最好考慮一下像Foundation或Bootstrap這樣的CSS框架。退房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()); 
    }); 
});