标签: modernizr

我正在尝试加载使用requireJS动态检测的Modernizr功能. 由于Modernizr内置了AMD支持,这应该不是问题.

我的requireJS配置包含Modernizr源目录和功能检测目录的路径:

requirejs.config({
  paths: {
    "modernizr" : "components/modernizr/src",
    "feature-detects": "components/modernizr/feature-detects"
  }
});

让我们假设我的一个观点需要svg测试.
我的视图定义可能如下所示

define(["feature-detects/svg"], function() { .. });

遗憾的是svg.js找不到Modernizr.js因为所有功能都检测到并且Modernizr源文件加载Modernizr而没有指定任何目录:define(['Modernizr'], ...

这导致了一个非常难看的require.config

requirejs.config({
  paths: {
    "Modernizr": "components/modernizr/src/Modernizr",
    "addTest": "components/modernizr/src/addTest",
    "ModernizrProto": "components/modernizr/src/ModernizrProto",
    "setClasses": "components/modernizr/src/setClasses",
    "hasOwnProp": "components/modernizr/src/hasOwnProp",
    "tests": "components/modernizr/src/tests",
    "is": "components/modernizr/src/is",
    "docElement": "components/modernizr/src/docElement",
    "feature-detects": "components/modernizr/feature-detects"
  }
});

有没有更简洁的方法告诉requireJS components/modernizr/src/无法找到文件时进行搜索？

更新

我创建了一个示例github项目,其中包括基本设置和运行演示.

有些@ font-face字体在非cleartype设置下效果不佳(边缘变得非常不稳定)

有没有办法通过javascript检测这个,以便我可以做一个modernizr风格的类添加到正文如果cleartype是关闭所以我可以在我的CSS中使用它

我想要一个使用相同HTML的网站,但要以最好的方式为它所服务的平台"小组化"它.

是否有一种标准做法,用于检测客户端上的移动设备/硬件键盘,并决定是否加载jQuery Mobile以及该站点的移动JavaScript或jQuery UI以及用于桌面体验的脚本？

以下似乎是一种合理的方法,但我想知道Modernizr.touch是否是检测此问题的最佳方法？例如:强制触摸可能不是Surface的最佳解决方案.有没有办法检测是否还有硬件键盘？

Modernizr.load({
  test: Modernizr.touch,
  yep : ['jquery-mobile.js','mobile.js']
  nope: ['jquery-ui.js','desktop.js']
});

编辑:

找到一些相关的Modernizr错误:

• Modernizr.touch检测触摸事件而不是触摸设备
• IE10"metro"未被检测为具有触控功能的设备

我想我真正需要的是一种检测设备是否能够触摸以及是否具有硬件键盘的方法.我可以使用David Mulder的答案来检测物理单位(英寸)中的设备宽度作为代理,并假设任何> 11英寸有键盘,但我打赌那里有一个大型平板电脑(或谷歌将发布nexus 12平板电脑: )这会做出错误的假设.

通常我使用modernizr来找出浏览器的能力.同时,我使用LESS CSS使我的css更具可读性和可维护性.使用LESS嵌套规则的常见样式如下所示:

#header {
  color: black;

  .logo {
    width: 300px;
    color: rgba(255,255,255,.6);
    &:hover { text-decoration: none }
  }
}

然后,如果我使用modernizr样式回退,我将为前一个块添加此文本:

.no-js #header,
.no-rgba #header {
  .logo {
    color: white;
  }
}

所以,看起来我有两个代码分支,每次我需要检查另一个兼容性方面时,分支的数量会增长.此代码的可维护性较差,因为您必须找到应用于每个元素的所有样式,并且使用嵌套类获得的好处会消失.

问题是:在LESS语法中是否有一种方法可以包含这样的回退,而不是为.no-js和其他.no-smth类启动新的代码分支？

如何检测HTML Media Capture*的浏览器支持？

传统的测试属性是否受支持的方法似乎不适用于某些设备(在iPad和Google Nexus上测试):

  var elm = document.createElement(input);
  if (capture in elm) {
    return true;
  } 

有一个对Modernizr的测试,但它似乎不可靠(它使用相同的原理):https: //github.com/Modernizr/Modernizr/pull/909

__

(*)有关HTML媒体捕获的更多信息:

http://www.w3.org/TR/html-media-capture/
http://www.html5rocks.com/en/tutorials/getusermedia/intro/#toc-round1

我写了一个代码的和平,以触摸和非触摸为基础的事件.它适用于所有其他浏览器和设备,但Firefox.默认FF返回true.

var thumbsEvent, isTouch = Modernizr.touch; // detect the touch
if(isTouch){
   thumbsEvent = 'click';//on touch surface, click
}
else {
   thumbsEvent = 'mouseover';//on non touch surface, mouseover
}

有没有办法管理这个问题.

示例小提琴

有谁知道这个错误意味着什么？此消息本周开始出现在Chrome控制台中,并在jquery中引发错误modernizr.在网上似乎没有太多有用的信息.

我正在尝试使用modernizr测试:nth-child浏览器支持,但我不知道该怎么做,我发现这个http://jsfiddle.net/laustdeleuran/3rEVe/测试:last-child但我不知道如何改变它以检测:nth-child(我也在考虑使用它,因为我相信不支持的浏览器:last-child也不支持:nth-child,但我不确定)

你们能帮助我吗？提前致谢!

有点奇怪.我有一个我正在努力的网站.但是,在我的笔记本电脑(华硕Zenbook)上,一些功能不起作用.我们花了很多时间使用Firebug尝试让它工作/解决它的问题,没有快乐!

然后我注意到这些功能实际上是在CSS中使用:hover类创建的,但也通过包含".no-touch"类来禁用触摸设备.

然后我查看了Modernizr添加到HTML标记的类,并添加了".touch"和标准.

看来,Modernizr正在将我的笔​​记本电脑(在Firefox和Chrome中)用作触控设备.

显然,这可能是一个问题,当网站上线时,某些功能对于使用Zenbook的任何人以及以相同方式起作用的任何其他设备都不起作用.

以前有人见过这样的事吗？也许与其他"非触摸"设备？

我正在使用<input type="date"/>根据caniuse.com android浏览器不支持这个.虽然我看一下HTC One 4.1.x上的页面,它有自己的输入字段本机渲染.三星Galaxy S3 4.1.2也具有该组件的渲染风格.然而caniuse.com表示不支持.HTC和三星已明确将此功能添加到他们的Android浏览器版本中.S3 4.1.2上的日期选择器会在多个S3上崩溃浏览器？

复制的步骤在首次访问页面时似乎更常见:

1. 选择日期选择器将月份向下移动两次.
2. 选择集.
3. 页面崩溃/变得反应迟钝.

我正在使用Modernizr,Modernizr测试浏览器以查看其功能.在HTCOne和S3 modernizr上没有引入我正在使用的polyfill,这是正确的.

所以IOS工作正常,Android没有.如果没有现代化的"测试:"属性中的讨厌的黑客,我怎么能解决这个问题呢？

谢谢,很长一段时间阅读,但充其量只是一个有趣的错误.

麦克风