[英]render html depending on resolution
I'm actually developing a website. 我实际上正在开发一个网站。 I have an image slider in desktop view like the example below. 我在桌面视图中有一个图像滑块,如下例所示。
<ul>
<li><src="image_1.jpg" alt=""></li>
<li><src="image_2.jpg" alt=""></li>
<li><src="image_3.jpg" alt=""></li>
</ul>
But in mobile view, i wanna display an image instead of the slider. 但是在移动视图中,我想显示图像而不是滑块。
<img src="image_4.jpg" alt="">
I know, the simplest solution is to hidden die slider in mobile view by css. 我知道,最简单的解决方案是通过CSS在移动视图中隐藏模具滑块。 But the HTTP requests of the slider images still exists. 但是,滑块图像的HTTP请求仍然存在。 But I don't want them. 但是我不要他们。 :) I need a possibility to render difficult mark up, depending on resolution/viewport. :)根据分辨率/视口,我需要提供一种可能的标记难度。
Whats the best solution? 什么是最好的解决方案? jQuery Script? jQuery脚本? Web Components/MVC Frameworks? Web组件/ MVC框架? I don't know. 我不知道。 I am grateful for any suggestions! 我感谢任何建议! :) :)
You can use a condition by checking is user agent mobile or not and then initialize slider or paste image instead of the slider. 您可以通过检查用户代理是否可移动来使用条件,然后初始化滑块或粘贴图像而不是滑块。
This solution can be used for mobile browser detection: Detecting a mobile browser 此解决方案可用于移动浏览器检测: 检测移动浏览器
Then use code something like that 然后使用类似的代码
...
mobilecheck && $('.sexyslider').initiate({lovely: 'options'});
...
PS &&
- is short notation of ' if
' statement. PS &&
-是' if
'语句的缩写。 It is the same as if (mobilecheck) {...}
就像if (mobilecheck) {...}
Actually if you want to render page in different way, depending of screen resolution - you better use 实际上,如果要根据屏幕分辨率以不同的方式呈现页面-最好使用
CSS Media queries CSS Media查询
for that. 为了那个原因。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.