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 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" />

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

1 个答案: