Question

我希望这个问题有答案。我不擅长编码，我希望有人能理解我的问题。

有没有办法让2种不同的设计.. 我有一个桌面/ ipad的设计和一个移动设备的设计。移动设备的设备更像是应用程序的设计。所以我现在想要的是，如果我的javascript代码发现该网站是在移动设备上打开的，那么该网站就变成了移动设备的版本。

例如： desktop / ipad版本是index.html，移动版本是mobile.html

有没有办法让javascript代码转到移动版本，如果

if（！is_mobile）{ （function（XXXXX）{ XXXXXX }

Answer 1

以下javascript代码非常有用：

function adjustStyle(){

    var width = 0;

    //getting width of webpage
    if(window.innerHeight){

        width = window.innerWidth

    }else if(document.documentElement &&    document.documentElement.clientHeight){

        width = document.documentElement.clientWidth;

    }else if(document.body){

        width = document.body.clientWidth;

    }


    //loading css if width less than 600. Make sure your link tag has id  "myCSS"
    if(width < 600) {

        document.getElementById("myCSS").setAttribute("href","css/mobile.css")

    }else{

        document.getElementById("myCSS").setAttribute("href","css/desktop.css")

    }


}

 //calling the function
 window.onresize = function(){
      adjustStyle();
 }

Answer 2

最佳做法是使用响应式html + css。这将根据设备类型或屏幕大小自动重新设置页面。但如果你喜欢这样做，你可以这样做：

在index.html的标题中（在任何样式或脚本之前），您可以过滤当前打开页面的设备，并将用户转发到移动html（如果他来自移动设备）。

<script>
if( /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
   window.location.href = 'mobile.html';
}
</script>

希望它有所帮助。

不同设计的桌面/移动设备

2 个答案: