gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 10:52:13 24 4
gpt4 key购买 nike

第一次在这里提问,希望我来对地方了。

下面是我正在处理的一个网站,(没有建立它)我想我只是在我的 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,它不支持原生媒体查询,请添加流行的 respond.js插件到您的代码。

我使用 HTML5 Boilerplate对于响应式设计,怎么推荐都不为过。

关于jquery - 响应式网站可在桌面上运行,但在移动设备上无法加载正确的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19031426/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com