javascript - 禁用 li anchor 移动

Question

我已经启动并运行了一个漂亮的响应式图库，其中包含 PrettyPhoto 插件，可以更轻松地查看图像。这当然在台式机/笔记本电脑上运行得很好，但在移动设备上绝对是糟糕的。 (加载时间较长，由于预先确定的 CSS 等原因，图像不适合屏幕)

我可以告诉浏览器不要在移动设备上加载 PrettyPhoto.js，但缩略图 anchor 仍会链接到全尺寸图像。 (我不想要!缩略图对于移动设备来说足够大，不需要全尺寸图像。)

必须有某种 jQuery 或 JavaScript 解决方案来解决这个问题。我不确定采取的最佳方法是什么，希望有人能为解决此问题提供一些见解。

HTML:

<ul id="portfolio">
  <section id="photos">
    <li class="all"> <a href="fullsize.jpg" rel="prettyPhoto[all]"> <img src="thumb.jpg"> </a> </li>
    <li class="all"> <a href="fullsize.jpg" rel="prettyPhoto[all]"> <img src="thumb.jpg"> </a> </li>
    <li class="all"> <a href="fullsize.jpg" rel="prettyPhoto[all]"> <img src="thumb.jpg"> </a> </li>
    <li class="all"> <a href="fullsize.jpg" rel="prettyPhoto[all]"> <img src="thumb.jpg"> </a> </li>
  </section>
</ul>

编辑:

到目前为止我得到的是:

<script>
if ( $(window).width() < 767) {
   $('#portfolio img').unwrap();
)};
</script>

这似乎不起作用。有什么想法吗？

Answer 1

你可以只使用.unwrap() jquery方法:

http://jsfiddle.net/fm9Un/1/

$(function(){ //DOM ready
    if($(window).width() < 767)
         $('#portfolio img').unwrap();
});