javascript - 根据分辨率渲染 html

Question

我实际上正在开发一个网站。我在桌面 View 中有一个图像 slider ，如下例所示。

<ul>
  <li><src="image_1.jpg" alt=""></li>
  <li><src="image_2.jpg" alt=""></li>
  <li><src="image_3.jpg" alt=""></li>
</ul>

但在移动 View 中，我想显示图像而不是 slider 。

<img src="image_4.jpg" alt="">

我知道，最简单的解决方案是通过 css 在移动 View 中隐藏骰子 slider 。但 slider 图像的HTTP请求仍然存在。但我不想要它们。 :) 我需要能够根据分辨率/视口(viewport)渲染困难的标记。

最好的解决方案是什么？ jQuery 脚本？ Web 组件/MVC 框架？我不知道。我很感激任何建议! :)

Answer 1

您可以通过检查用户代理是否移动来使用条件，然后初始化 slider 或粘贴图像而不是 slider 。

该解决方案可用于移动浏览器检测: Detecting a mobile browser

然后使用类似的代码

...
mobilecheck && $('.sexyslider').initiate({lovely: 'options'});
...

附注&& - 是“if”语句的简短表示法。它与 if (mobilecheck) {...}

相同

实际上，如果您想根据屏幕分辨率以不同的方式渲染页面 - 您最好使用

CSS Media queries

为此。