jquery - 自适应移动设计适用于小型桌面窗口，但不适用于移动设备

Question

我为我的网站开发了移动布局 http://www.latinaperstrada.it/

我所做的就是为较小的屏幕准备一个特定的 css，并使用 jQuery 来应用正确的 css。我仅使用两种布局，宽度阈值为 940 像素

function adjustStyle(width) {
  styleSheet = "";
  width = parseInt(width);
  if (width < 940) {
    styleSheet = http_base_url + "/css/style-size-small.css";
  } else {
    styleSheet = http_base_url + "/css/style-size-normal.css";
  }
  //check the current value of the linked css.
  //size-stylesheet is the id I gave to the <link> tag
  if( $("#size-stylesheet").attr("href").lastIndexOf(styleSheet, 0) !== 0){
    $("#size-stylesheet").attr("href", styleSheet);
  }
}

$(window).load(function() {
  adjustStyle($(this).width());
  $(window).resize(function() {
    adjustStyle($(this).width());
  });
});

在桌面上一切看起来都很好。我更改了窗口的大小，布局也随之调整。

然后我在各种环境下测试了布局。
三星 Galaxy S II，默认浏览器:可以使用
与上面相同的设备，Firefox:无法工作(即使屏幕的分辨率低于我的阈值，我也得到了一个微小的不可读的桌面版本)
一部较旧的 Iphone，不知道到底是哪个，但可以肯定的是低分辨率:无法工作，仍然是很小的桌面版本

我显然错过了一些东西，但我不知道是什么。

Answer 1

head 部分中的视口(viewport)标记丢失。添加此:

<!-- viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" />