渲染html取决于分辨率

Question

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

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

但在移动视图中，我想显示图像而不是滑块。

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

我知道，最简单的解决方案是通过css在移动视图中隐藏模具滑块。但是滑块图像的HTTP请求仍然存在。但我不想要它们。 :)我需要有可能渲染困难标记，具体取决于分辨率/视口。

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

Answer 1

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

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

然后使用类似的代码

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

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

相同

实际上，如果你想以不同的方式呈现页面，取决于屏幕分辨率 - 你最好使用

  

CSS媒体查询

为此。