根据分辨率渲染html答案

【问题标题】：render html depending on resolution根据分辨率渲染html
【发布时间】：2014-05-05 13:40:51
【问题描述】：

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

<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 框架？我不知道。我很感激任何建议！ :)

【问题讨论】：

【解决方案1】：

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

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

然后使用类似的代码

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

附： && - 是“if”语句的简写形式。同if (mobilecheck) {...}

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

CSS 媒体查询

为此。

【讨论】：