链接返回页面后，jQuery load（）无法加载

Question

我有这个小脚本，在初始页面加载时工作正常。我在页面顶部有一个菜单。当我转到我站点中的另一个页面并使用后退按钮返回主页时，脚本仍然可以正常工作并加载文件。但是，当我使用链接返回此页面时，PHP文件无法加载。请任何人都可以提供建议。

$(window).ready(function () {
  if (screen.width < 1024) {
    $('#place_holder').load('small.php');
    return false;
  } 

  if (screen.width > 1024) {
    $('#place_holder').load('desktop-wide.php');
    return false;
  } 

  if (screen.width = 1024) {
    $('#place_holder').load('desktop-small.php');
    return false;
  }
}); 

Answer 1

你试图通过客户端加载php文件，这是不可能的。

您可以根据屏幕大小添加新的css文件

if (screen.width < 1024) {
  $("<link rel='stylesheet' href='style.css'>").appendTo("head");
}

但这不是一个好习惯！

相反，您必须在标头中使用链接标记规则集，如下所示

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

然后你当然要创建一个style1024.css，它包含你要应用于1024个屏幕的css规则

或者在样式表文件中使用@media css媒体查询规则。

 @media (max-width: 1024px) {
    .mydiv {
     background-color:#333;
   }
 }

查看此文档了解更多关于css media queries的信息