使用 Javascript 决定要加载的 HTML 内容

Question

我通过Javascript确定用户使用的是移动设备还是桌面设备。如果他使用的是桌面设备，则应向他们显示网站的桌面版本，如果他使用的是移动设备，则应显示移动应用程序。现在我只是隐藏了 CSS 不需要的 HTML 部分，但由于加载时间，我想摆脱这部分。

现在我想知道如何通过javascript决定应该加载哪个HTML代码？

提前致谢

Answer 1

我认为媒体查询是答案，或者您可以使用以下JavaScript：

window.screen 
AvailableWidth = screenWidth;
AvailableHeight =screenHeight;

Answer 2

我认为你离得不远。不过，我不会这样做，正如其他人建议的那样，我会考虑使您的HTML响应式。话虽如此，你应该(简单地(颠倒你的逻辑。与其在整页中隐藏元素，不如从注入 HTML 的空白页开始。

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

Answer 3

@media only screen and (max-width: 600px) {
< your css >
}

请参阅 https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries