不同设计的台式机/移动设备 [英] Different design desktop/mobile devices

问题描述

我希望对此问题有一个答案. 我不太擅长编码，希望有人能理解我的问题.

I hope there is an answer for this question. I'm not good at codeing and I hope someone will understand my question.

有没有办法拥有两种不同的设计. 我有一个针对台式机/ipad的设计，一个针对移动设备的设计. 一种用于移动设备的软件更像是应用程序的设计. 因此，我现在想要的是，如果我的JavaScript代码发现该网站是在移动设备上打开的，则该网站将变成该移动设备的版本.

Is there any way to have 2 different designs.. I have a design for a desktop/ipad and one for mobile devices. The one for the mobile device is more like the design of an application. So what I want now is if my javascript code find out that the website is opened on a mobile device, the website turn into the version for the mobile device.

例如: 台式机/ipad版本为index.html，移动版本为mobile.html

For example: The desktop/ipad version is the index.html and the mobile version is the mobile.html

如果有

if(！is_mobile){ (功能(XXXXX){ XXXXXX }

if(!is_mobile) { (function(XXXXX) { XXXXXX }

推荐答案

以下javascript代码将非常有用:

The following javascript code will be useful:

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

这篇关于不同设计的台式机/移动设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！