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

【问题标题】：Adaptive mobile design works in small desktop window, but doesn't on mobile device自适应移动设计适用于小型桌面窗口，但不适用于移动设备
【发布时间】：2014-06-29 01:05:11
【问题描述】：

我为我的网站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，不知道到底是哪个，但肯定是低分辨率：不工作，仍然很小的桌面版本

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

【问题讨论】：

标签： jquery css mobile responsive-design

【解决方案1】：

head 部分中的视口标记丢失。添加这个：

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

【讨论】：