2

第一次在这里问，所以希望我在正确的地方。

下面是我正在开发的一个站点（没有构建它），我想我只是在我的 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());
});
});
4

1 回答 1

4

<head>尝试在顶部附近添加以下标签：

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

如果您使用 jQuery 在样式表之间切换，那么您并不是真正的“响应式”，因为您将关闭 JavaScript 的用户置于冷漠之中。媒体查询是实现这一点的最佳方式。如果您需要支持不支持原生媒体查询的 IE<8，请将流行的respond.js插件添加到您的代码中。

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

于 2013-09-26T14:50:44.857 回答