【发布时间】：2015-10-28 23:19:42
【问题描述】：
我创建了一个简单的网站，我正在努力使其适合移动设备。
我尝试过使用各种方法，例如：
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='mobile.css' />
还有 jQuery：
<link rel="stylesheet" type="text/css" href="main.css" />
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="mobile.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function adjustStyle(width) {
width = parseInt(width);
if (width < 900) {
$("#size-stylesheet").attr("href", "mobile.css");
} else {
$("#size-stylesheet").attr("href", "main.css");
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});
</script>
似乎没有任何方法有效。例如，在移动设备上，网页看起来相同（来自main.css 而不是mobile.css）。有什么想法或其他方法吗？
编辑：
我现在有以下设置：
<link rel='stylesheet' media='screen and (min-width: 701px)' href='main.css' />
<link rel='stylesheet' media='screen and (max-width: 700px)' href='mobile.css' />
但在移动设备上它使用 main.css（它不应该这样做，因为最小宽度不是 901 像素）。如果我切换 css 文件，例如 main.css 转到 min-width 10px 和 max-width 900px，而 mobile.css 转到 min-width 901px。然后网站相应地更改，现在在计算机上显示移动 css（应该发生），但移动设备也显示移动 css（它不应该因为它们已被交换）。所以移动设备一直在使用不正确的 css。
编辑编辑：
Viewport 可以让它发挥作用。但是有一些问题，例如我更新了我的 CSS 文件。我检查了 mobiletest.me 并进行了更改，但是在物理移动设备（mobiletest.me 上的同一设备）上进行了更改
【问题讨论】：
-
您可能需要阅读媒体查询，尤其是因为它们不需要 Javascript 才能正常工作。
-
是的，我知道。我尝试了两种不同的方式，媒体查询和 Javascript。两者都没有工作。我不知道为什么它没有影响
-
@Thomas 我认为对于移动设备您可能需要减少
min-width? -
多大？对于任何 iPhone 真的
-
@Thomas 基本上在 300 的某个地方。
标签： jquery html css mobile mobile-website