当设备宽度等于移动设备的宽度时，如何访问另一个html文件？

Question

因此，我制作了另一个专门针对手机的html文件，我只想在设备宽度等于手机宽度时访问html文件。请帮我。

@media only screen and (max-width: 500px) {

    html{
        background-image: url("C:/Users/Joalu/Desktop/WebApp/img/indexbackground.png");
        font-family:  'Lato';
        width: auto;
        height: 1908px;
        overflow-x: hidden;
        background-repeat: no-repeat;
    }

    body{
        margin: 0;
    } 

因此，使用CSS可以做到这一点，您可以更改html文件的样式，但不能更改html文件的内容。如何使2. html文件仅在屏幕宽度像手机（宽度为500px）时才激活？

Answer 1

有多种元素和技术来响应设计（在不同的设备宽度上更改内容和/或布局）。尽量不要将其视为不同的HTML页面，而是将同一页面上的元素根据设备宽度显示和隐藏。

例如：-

<div class="desktop-content">
  <p>This is the content someone will see on a desktop</p>
</div>
<div class="mobile-content">
  <p>This is the mobile content</p>
</div>

然后使用CSS，您可以执行以下操作：-

.mobile-content{
  display:none;
}
@media only screen and (max-width: 500px) {
  .desktop-content{
    display:none
  }
  .mobile-content{
    display:block;
  }
}

这里的缺点是您要求浏览器加载这两组内容，但只显示其中的一组，因此如果有大图像或涉及许多内容，则另一种方法可能更好。

如果您必须有2个单独的HTML文件，则可以根据窗口的宽度将JavaScript重定向到正确的HTML文件...但是我不推荐这种方法。

Answer 2

代替在主页上，您可以使用javascript来重定向用户

    <script type="text/javascript">
    if (screen.width <= 500) {
    document.location = "other.html";
    } else {
document.location = "index.html";
}
    </script>