Question

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

下面是我正在处理的网站（没有构建它），我想我只是在我的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());
});
});

Answer 1

尝试在靠近顶部的<head>内添加以下标记：

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

如果您正在使用jQuery在样式表之间切换，那么您就不会真正“响应”，因为您将离开已经关闭JavaScript的用户。 Media queries是实现此目的的最佳方式。如果您需要支持IE＆lt; 8，它没有本机媒体查询支持，请将常用的respond.js插件添加到您的代码中。

我使用HTML5 Boilerplate进行响应式设计，但不能推荐它。

响应式网站适用于桌面，但在移动设备上无法加载正确的样式

1 个答案: