[英]Decide with Javascript which HTML Content to load
I determine via Javascript if the User is using a mobile or a Desktop Device. 我通过Javascript确定用户使用的是移动设备还是台式设备。 If he is using the Desktop Device, they should be shown the Desktop Versions of the Website, if he is using a mobile Device it should display the mobile Application. 如果他正在使用桌面设备,则应该向他们显示网站的桌面版本,如果他正在使用移动设备,则应该显示移动应用程序。 Now I'm just hiding the HTML part that is not needed with CSS but I want to get rid of this part due to loading times. 现在,我只是隐藏了CSS不需要的HTML部分,但由于加载时间,我想摆脱这一部分。
Now I want to know how I can decide by javascript which HTML Code should be loaded? 现在,我想知道如何通过javascript决定应该加载哪个HTML代码?
Thanks in Advance 提前致谢
I think media queries are the answer or you can use JavaScript of: 我认为媒体查询是答案,或者您可以使用以下JavaScript:
window.screen
AvailableWidth = screenWidth;
AvailableHeight =screenHeight;
@media only screen and (max-width: 600px) {
< your css >
}
Refer to https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries 请参阅https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries
I don't think you're too far off. 我认为你离得太远了。 I wouldn't have done it this way though and as others suggested I would have looked at making your HTML responsive. 我不会那样做,正如其他人建议的那样,我会考虑使您的HTML响应式的。 With that being said, you should (simply) reverse your logic. 话虽如此,您应该(简单地)颠倒您的逻辑。 instead of a full page where you hide elements, you should start with a blank page where you inject HTML. 而不是在其中隐藏元素的整个页面,而应该从在其中注入HTML的空白页面开始。
https://codepen.io/chancet1982/pen/VGxZyO https://codepen.io/chancet1982/pen/VGxZyO
var btn = document.createElement("BUTTON"); // Create a <button> element
var t = document.createTextNode("CLICK ME"); // Create a text node
btn.appendChild(t); // Append the text to <button>
function myFunction(x) {
if (x.matches) { // If media query matches
document.body.appendChild(btn);
} else {
//Do something else..
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.