Tag: 媒体查询

如何在JavaScript中使用媒体查询: 我对JavaScript知之甚少，所以我甚至不确定我的问题是否有意义。然而，我的观点是如何应用相同的媒体查询原则来根据屏幕的宽度更改脚本上的特定值。在下面的示例中，我使用滚动间谍活动菜单，负滚动-100px用于页眉补偿。这种偏移是必要的，因为标题具有固定的位置。如果窗口小于900px宽度，我需要将偏移值更改为0px，因为在此时，标头位置变为相对。 $(document).ready(function () { $(window).scroll(function () { var y = $(this).scrollTop(); $(‘.link’).each(function (event) { if (y >= $($(this).attr(‘href’)).offset().top – 100) { $(‘.link’).not(this).removeClass(‘active’); $(this).addClass(‘active’); } }); }); }）; $(function () { $(‘a[href*=#]:not([href=#])’).click(function () { if (location.pathname.replace(/^\//, ”) == this.pathname.replace(/^\//, ”) && location.hostname == this.hostname) { var target = $(this.hash); target = target.length […]

如何“欺骗”媒体查询？如何伪造窗户的宽度？: 我正在开发响应式网站，你们都知道手动缩小浏览器窗口有点舒服（此外，Firefox不允许我在一个值之后这样做）。所以我决定编写一个jQuery“插件”来缩小区域 – 或者+按钮。一旦我写了这个： $(document).ready(function() { var doResizing = function(increaseWith) { if ($(‘#xxxx’).length == 0) { $(‘body’).css(‘margin’, 0).css(‘padding’, 0); $(‘body > *’).wrapAll(”); $(‘#xxxx’).css(‘background-color’, ‘red’) .css(‘overflow’, ‘scroll’) .css(‘padding’, 0) .css(‘margin’, 0) .css(‘position’, ‘absolute’) .width(‘100%’); } $(‘#xxxx’).height(parseInt($(window).height()) + ‘px’).width(parseInt($(‘#xxxx’).width())+increaseWith + ‘px’); } $(document).keypress(function(e) { if (e.which == 45) { doResizing (-10); } if (e.which == 43) […]

检测移动浏览器而无需用户代理嗅探: 检测移动浏览器哪种方法更可靠？ UA嗅闻 Jquery的width() 据我所知，UA嗅探不是很可靠。我需要根据查看页面的移动设备的宽度来更改页面的HTML。单靠媒体查询我无法做到这一点。

适用于所有设备的HTML5应用的媒体查询: 任何人都有想法，关于所有有助于检测单个设备的媒体查询，例如： iOS，iPhone 5，iPhone Ratina显示屏，Android手机。，iPad，平板电脑atc？

在给定特定宽度范围的情况下使用jquery更改类名（媒体查询）: 我有以下要修改的html：我想使用媒体查询，但我不想修改css，而是将类名从width8替换为width6。以下标准媒体查询通常无法实现此目的： @media only screen and (min-width: 1240px) and (max-width: 1484px) { } 我希望使用jquery删除类，并在窗口介于1240和1484px之间时添加一个类。你可以帮助我使用jquery替代媒体查询来修改内联类和id名称吗？这是我的jquery $(document).ready(function() { $(window).resize(function(){ var width = $(window).width(); if(width >= 1240 && width = 1485 && width = 1789 && width = 2238 && width <= 3000){ $('#info').removeClass('col7').addClass('col6'); } else{ $('#info').removeClass('col8').addClass('col9'); } }) .resize(); });

仅在屏幕媒体上运行javascript / jquery，而不是打印: 如何才能在@media screen上运行jqueryfunction？背景：我有一个screen.css样式表和一个screen.css样式表。我有两个javascript函数，其中一个我不想在页面的打印版本上运行。

如何让CSS mediaqueries与jQuery $（window）.innerWidth（）一起使用？: 我正在尝试让jQuery处理菜单，而CSS在调整浏览器大小时会对窗口背景做些什么。所以jQuery做了这样的事情： if ( $(window).innerWidth() < mediaQueries['small']) { // (where 'small' would be 966) // Perform jQuery stuff on a menu ul } CSS有这样的东西： @media all and (max-width: 966px) { body { background: url(smallback.jpg) no-repeat 0 0; } } 当使用Firefox时，有一个17像素（似乎是垂直滚动条宽度）的间隙，其中已经处理了jQuery的东西，但CSS却没有。由于其他浏览器可能会为其滚动条使用不同的宽度，因此只需在CSS中添加17px就无法解决问题。那么如何让jQuery考虑滚动条呢？ $(window).innerWidth()似乎对我没那么做。任何帮助将不胜感激。在Firefox，Opera或IE中打开此页面以查找问题的隔离版本。（Chrome和Safari不会遇到这个问题。因此：Webkit：+ 1，Gecko：-1，Trident：-1，Presto：-1。）

使用css媒体查询触发jquery: 我在我的项目中使用css媒体查询来创建一个可以在任何大小的屏幕上工作的网站。我希望触发差异jquery函数，就像我用css一样。例如，如果浏览器大小介于1000px和1300px之间，我想调用以下函数： $(‘#mycarousel’).jcarousel({ vertical: true, scroll: 1, auto: 2, wrap: ‘circular’ }); 但是当浏览器大小低于1000px时，js将停止其处理。等等等等。我不确定这是否可行，但也许现有的解决方案或插件可根据浏览器窗口大小创建不同的js环境。我想我可以用某种格式创建条件语句。有什么想法吗？