admin管理员组

文章数量:1431769

I've heard that Modernizr's test for touch is one of the best ways to test if the device a page is being viewed on is touch or multi-touch enabled.

I'm trying to use it ( the touch test ) as well as modernizr's load function to load a stylesheet only when the device has touch capability.

However, my code doesn't seem to be working. What am I doing wrong?

<script type="text/javascript">
Modernizr.load({
    test: Modernizr.touch,
    yep: 'assets/css/touch.css'
});
</script>

Update: Sorry, I should have clarified what not-working means: When I visit the page on my multi-touch smart-phone, the styles are not taking effect. I applied the styles in the normal stylesheet and they take effect, but when I switch them into touch.css and try to load that conditionally with Modernizr, it doesn't work. My copy of Modernizr does include yepnope and the touch test as I am using both in other instances where they are working.

I've heard that Modernizr's test for touch is one of the best ways to test if the device a page is being viewed on is touch or multi-touch enabled.

I'm trying to use it ( the touch test ) as well as modernizr's load function to load a stylesheet only when the device has touch capability.

However, my code doesn't seem to be working. What am I doing wrong?

<script type="text/javascript">
Modernizr.load({
    test: Modernizr.touch,
    yep: 'assets/css/touch.css'
});
</script>

Update: Sorry, I should have clarified what not-working means: When I visit the page on my multi-touch smart-phone, the styles are not taking effect. I applied the styles in the normal stylesheet and they take effect, but when I switch them into touch.css and try to load that conditionally with Modernizr, it doesn't work. My copy of Modernizr does include yepnope and the touch test as I am using both in other instances where they are working.

  • javascript
  • css
  • modernizr
Share Improve this question edited Mar 31, 2013 at 22:30 IMUXIxD asked Mar 31, 2013 at 22:16 IMUXIxDIMUXIxD 1,2275 gold badges23 silver badges45 bronze badges 2
  • What does "doesn't seem to be working" mean? Are you getting errors in the console? Does your build of Modernizr include yepnope? – Evan Davis Commented Mar 31, 2013 at 22:25
  • @Mathletics I updated the question with answers to your questions. – IMUXIxD Commented Mar 31, 2013 at 22:30
Add a ment  | 

2 Answers 2

Reset to default 3

Your script block looks correct, so the problem must be something else. Since you are certain your Modernzr build includes Yepnope, here are a few guesses:

  1. Your script block es before the script tag including Modernzr
  2. The path to the CSS is wrong

I would start by adding a callback: function(){ alert('loaded!'); } to the .load() statement to see if that happens. If not, I would replace Modernzr.touch with true and test on a desktop browser instead to see if there are and Javascript errors happening.

Another solution would be not to load an extra stylesheet for touch enabled devices, but to add a class to the <body> instead.

Like so:

if(Modernizr.touch) {
    $('body').addClass('touch');
}

And then prefix your stylesheet classes with .touch:

a:hover {
    color: red;
}


a, .touch a:hover {
    color: blue;
}

Loading an extra stylesheet is a good idea when there are many and substantial differences in the CSS for touch and non touch devices. In that case using only one stylesheet is not a good idea since it will bee quite big in size. If you only have minor differences, adding a .touch class to the body (or any other element) is the better way to go, I think.

本文标签： javascriptTrying to load stylesheet only for touch devices with ModernizrStack Overflow

版权声明：本文标题：javascript - Trying to load stylesheet only for touch devices with Modernizr - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745470717a2659735.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。