响应式网站可在桌面上运行，但在移动设备上无法加载正确的样式答案

【问题标题】：Responsive site works on desktop, but on mobile device does not load correct styles响应式网站可在桌面上运行，但在移动设备上无法加载正确的样式
【发布时间】：2013-09-26 23:06:33
【问题描述】：

第一次在这里问，所以希望我来对地方了。

下面是我正在开发的一个网站（没有构建它），我想我只是在我的 iPhone 上测试它，但发现“响应性”不能正常工作。

当您在桌面上重新调整浏览器的大小时，它可以正常工作，但在手机/平板电脑上，它会加载完整的桌面样式 - 奇怪的是，如果您旋转到横向并再次返回，它会重新加载正确的样式表.

共有三种样式表：桌面、平板电脑和移动 - 有点 jquery 似乎可以根据设备宽度在它们之间切换。

任何帮助将不胜感激！ :)

http://weybridge-dental-care.co.uk/

谢谢！

<!-- Resolution switcher -->
<script type='text/javascript' src='http://weybridge-dental-care.co.uk/wp-content/themes/weybridge/resolution-switcher.js'></script>

<!-- Disable viewport zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

这是js：

function adjustStyle(width) {
width = parseInt(width);
if (width >= 1000) {
    $("#size-stylesheet").attr("href", "http://www.weybridge-dental-care.co.uk/wp-content/themes/weybridge/styles-desktop.css");
} else if ((width >= 701) && (width <= 999)) {
    $("#size-stylesheet").attr("href", "http://www.weybridge-dental-care.co.uk/wp-content/themes/weybridge/styles-tablet.css");
} else {
   $("#size-stylesheet").attr("href", "http://www.weybridge-dental-care.co.uk/wp-content/themes/weybridge/styles-mobile.css"); 
}
}

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

【问题讨论】：

您能在此处发布执行响应式切换的代码吗？而不是让我们在网站上寻找它？
你能把有问题的代码部分隔离出来，然后把它们贴在这里吗？否则我们只能根据这个描述调试整个网站......
我已经编辑了我的原始帖子以包含详细信息。谢谢！
我怀疑你的方法根本行不通——你正在改变样式表的href 在它被加载和应用之后。媒体查询是执行此操作的正确且受支持的方式。

标签： jquery css mobile responsive-design viewport

【解决方案1】：

尝试在您的<head> 中添加以下标签，靠近顶部：

<meta name="viewport" content="width=device-width">

如果您使用 jQuery 在样式表之间切换，那么您并不是真正的“响应式”，因为您会让关闭了 JavaScript 的用户望而却步。 Media queries 是实现这一点的最佳方式。如果您需要支持不支持原生媒体查询的 IErespond.js 插件添加到您的代码中。

我将HTML5 Boilerplate 用于响应式设计，我推荐的再多也不为过。

【讨论】：

嗨，这已经在标题中了。理想情况下我会使用媒体查询，但这意味着重新做我的样式表我尽量避免。谢谢