我实际上正在开发一个网站。 我在桌面 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 框架?我不知道。我很感激任何建议! :)
最佳答案
您可以通过检查用户代理是否移动来使用条件,然后初始化 slider 或粘贴图像而不是 slider 。
该解决方案可用于移动浏览器检测: Detecting a mobile browser
然后使用类似的代码
...
mobilecheck && $('.sexyslider').initiate({lovely: 'options'});
...
附注&&
- 是“if
”语句的简短表示法。它与 if (mobilecheck) {...}
实际上,如果您想根据屏幕分辨率以不同的方式渲染页面 - 您最好使用
CSS Media queries
为此。
关于javascript - 根据分辨率渲染 html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23473984/