针对Mobile + CSS类的jQuery?
问题描述:
我目前使用下面从包含.iframe-NAV某些页面针对Mobile + CSS类的jQuery?
$(document).ready(function() {
if($(".iframe-nav").length > 0) // If .iframe-nav exists
$("#main-header").hide(); // Hide #main-header
});
删除我的头这个伟大的工程。我的问题是,我有其他页面包含“.iframe1”,不受该脚本的影响,并且因为在移动设备上显示不正确。我需要两个单独的CSS类,原因是我现在不会进入。
有没有办法从包含.iframe1网页,以及从我的移动网站@mobile只有屏幕上删除#主标题和(最大宽度:767px)?
我尝试了以下测试从所有移动页面(作为测试)中删除#main-header,但未成功。我还有很多东西需要学习...... 没有工作:
$(document).ready(function() {
if (matchMedia('only screen and (max-width: 767px)').matches) {
$("#main-header").hide(); // Hide #main-header
}
非常感谢提前。
答
我会建议把你的逻辑到$(window).on("resize"
块如下:
$(window).on("resize", function (e) {
var newWindowWidth = $(window).width();
if(newWindowWidth < 767) //check for width
{
$("#main-header").hide();
}
});
+0
嘿@vijayP,你的解决方案让我在那里分道扬part。但我遇到两个问题: 1-我仍然需要在脚本中额外定位.iframe1类,以便仅阻止具有该类的页面在移动设备上显示导航。 2-脚本正在成功从移动网站中删除#main-header,但只有在滚动已激活之后。这可能与我的wordpress高级主题的响应式断点有关。如果你认为你可以帮助这个,我可以PM你我的CSS等 任何额外的帮助将不胜感激,谢谢! – SnaFubar
你怎么测试呢?你使用的是桌面浏览器,只是调整窗口大小?另外http://caniuse.com/#search=matchMedia只是IE10 +你在IE9中测试吗? – NullHappens
我在iPhone上使用Safari来测试这些移动卡住。通常用于桌面测试的Chrome或Safari。 (osx) – SnaFubar