如何将html文件更改为屏幕大小的另一个html文件？

My goal is when you change the screen size to scale of a phone ( width wise ) that you get a different html file or something like this.

我的目标是当您将屏幕大小更改为手机的比例(宽度方式)时,您将获得不同的html文件或类似的内容。

1 个解决方案

#1

As previously mentioned you should really use media queries and responsive dev to achieve the result you are looking for.

如前所述,您应该使用媒体查询和响应式开发来实现您正在寻找的结果。

If however there are specific pages you have identified that simply have to use a different page then you could use something like:

但是,如果您确定了特定页面,只需要使用不同的页面,那么您可以使用以下内容:

<script type="text/javascript">

var doRelocation = function() {

    var currentWidth = window.innerWidth,
        breakpoint = 800,
        newLocation = 'new-page.html';

    if (currentWidth < breakpoint) {
        window.location.replace(newLocation);
    }

}

doRelocation();

window.addEventListener('resize', doRelocation);

</script>

This script is pretty basic but the function runs on load to determine the screen width and also on resize. It'll only work in modern browsers but I guess there aren't many small screened devices running IE8.

此脚本非常基本,但该功能在加载时运行以确定屏幕宽度以及调整大小。它只能在现代浏览器中使用,但我想没有很多小型屏幕设备运行IE8。

#1