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

【问题标题】：Different design desktop/mobile devices不同设计的桌面/移动设备
【发布时间】：2016-09-26 23:19:02
【问题描述】：

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

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

例如：桌面/ipad 版本为 index.html，移动版本为 mobile.html

如果

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

如果（！is_mobile）{ （函数（XXXXX）{ XXXXXX }

【问题讨论】：

标签： javascript android ios jquery-mobile mobile

【解决方案1】：

最佳做法是使用响应式 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】：

以下 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();
}

【讨论】：