使用用户代理的 PC 和移动站点代码答案

【问题标题】：pc and mobile site code using user agent使用用户代理的 PC 和移动站点代码
【发布时间】：2014-02-21 15:03:03
【问题描述】：

我想为我的网站制作它，这是我的问题：

如果用户使用电脑查看我的网页，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

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
请使用媒体查询。
你能给我代码使用吗

标签： javascript html

【解决方案1】：

你可以通过媒体查询来做这样的事情

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

【讨论】：

谢谢你们，你们最好的
你真的应该感谢他，勾选一个作为正确答案。
感谢@AngrySpartan 的支持
如果您对此答案感到满意，请单击复选标记作为已接受的答案。 @ehis

【解决方案2】：

使用 CSS 中的媒体查询来实现这一点可能更可靠。由于某些浏览器没有启用 JavaScript，尤其是移动浏览器，因此在没有 JavaScript 的情况下支持基本功能被认为是最佳实践。请参阅this answer by Haylem 了解更多信息。

this SmashingMagazine.com article, "How to Use CSS3 Media Queries" 中提供了有关 CSS3 媒体查询的精彩解释。在您的示例中，您可以按如下方式快速实现：

<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。

【讨论】：