根据浏览器语言重定向用户时的 CSS 问题答案

【问题标题】：CSS issue when redirecting user deppending on browser's language根据浏览器语言重定向用户时的 CSS 问题
【发布时间】：2015-05-22 11:25:34
【问题描述】：

在尝试根据浏览器的语言将用户重定向到同一网站的不同版本时，我遇到了一个愚蠢的问题。

实际上用户似乎被正确地重定向到语言站点版本，问题是该站点没有正确加载 CSS 和 JS 文件（我认为这是由于它的文件夹结构），而我不是确定我该如何解决它。

为了执行重定向，我设置了一个名为“index.php”的文件，该文件位于根文件夹中，它具有以下 PHP 代码：

<?php
  header("Location: " . getLanguage());

  function getLanguage(){
    $availableLanguages = array('es', 'en');
    $defaultLanguage = 'en';
    $token = strtok($_SERVER['HTTP_ACCEPT_LANGUAGE'], ",;");
    while ($token !== false) {
      $language = substr($token, 0, 2);
      if (in_array($language, $availableLanguages)) {
        return $language;
      }
      $token = strtok(",;");
    }
    return $defaultLanguage;
  }
?>

如您所见，只有 2 种语言（英语和西班牙语）。

下一步是放置 2 个不同的文件夹，其中包含各自的“index.html”文件：

/es --> 西班牙语 index.html 版本 /en --> 英文 index.html 版本

所以我们可以在服务器上看到以下示例文件夹结构：

http/img/picture.jpg
http/js/script.js
http/css/style.css
http/en/index.html（网站英文版）
http/es/index.html（网站的西班牙语版本）
http/index.php

当用户进入网站时，php 文件将他重定向到 '/en' 或 '/es' 文件夹，具体取决于浏览器语言...然后用户加载带有 followihg 的 'index.html' 文件HTML结构：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>my site in english</title>
    <link rel='icon' href='img/favicon.png'>
    <!--Styles-->
    <link href="css/styles.css" type="text/css" rel="stylesheet">
</head>

<body>
<p>this is an example</p>
<!--Styles-->
<script src="js/script.js"></script>
</body>
</html>

如您所见，“index.html”定义了位于“root/css”、“root/img”和“root/js”文件夹中的 css、img 和 js 文件的路径，但是网站没有加载它们......我不知道为什么？

【问题讨论】：

如果我理解正确，那么css/styles.css 将在en 或es 目录中寻找css 目录。您可能希望在 URL 前加上 ../，例如../css/styles.css.
是的，这就是问题所在……谢谢

标签： php html css multilingual

【解决方案1】：

索引文件现在位于 /en 或 /es 内，因此：

<link href="css/styles.css" type="text/css" rel="stylesheet">

应该是：

<link href="../css/styles.css" type="text/css" rel="stylesheet">

注意添加的../ 以返回文件夹。您拥有的 js 和其他资源也是如此。

我建议使用绝对路径，这样你就不会遇到类似的问题：

<link href="/css/styles.css" type="text/css" rel="stylesheet">

注意 URI 开头的 /。

【讨论】：

谢谢！我尝试在 URI 的开头添加“/”，但它不起作用，但是通过添加“../”它解决了问题:)
'/' 开头是最好的使用方式。它不起作用的原因可能是以下一个或多个问题：1-您没有使用 Web 服务器并直接在浏览器中运行 .html 文件，即“/”不再指向文档根目录 2-文件夹路径错误。 3- 文档根目录 (/) 比 /css 高一级（可能是 /http ？）
当然，可能还有其他问题我没有在这里列出。
嗨 Adon，我想你给了钥匙...确切的路径是 '/httpdocs/css/' 所以也许我应该把这个路径 '/http/.../css/' 添加到创建通用路径...

【解决方案2】：

您需要调整对外部文件的引用以“升级”目录（例如，../css/styles.css）或从根目录开始（例如，/css/styles.css）。我推荐后者，因为它允许您在目录结构中移动您的任何位置，而无需更改任何引用。

例如，如果您正在查看英文页面，那么您所拥有的参考资料正在寻找http://yourdomain.tld/en/css/styles.css 上不存在的文件。

【讨论】：