第一次在这里提问，希望我是在正确的地方。
下面是我正在开发的一个网站(没有构建它)，我想我只是在我的 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());
});
});
最佳答案
尝试在 <head> 中添加以下标签，靠近顶部:
<meta name="viewport" content="width=device-width">
如果您使用 jQuery 在样式表之间切换，那么您并不是真正的“响应式”，因为您会让关闭 JavaScript 的用户感到冷落。 Media queries是实现这一点的最佳方式。如果您需要支持 IE<8，而该浏览器没有 native 媒体查询支持，请添加流行的 respond.js插件到您的代码。
我使用HTML5 Boilerplate对于响应式设计，强烈推荐它。
关于jquery - 响应式网站可以在桌面上运行，但在移动设备上无法加载正确的样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19031426/