Question

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

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

预先感谢

Answer 1

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

window.screen 

AvailableWidth = screenWidth;
AvailableHeight =screenHeight;

Answer 2

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

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

Answer 3

我认为你离得太远了。 我不会那样做，正如其他人建议的那样，我会考虑使您的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

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

3 个答案: