異なるデザインのデスクトップ/モバイルデバイス

Question

この質問に対する回答があることを願っています。 私はコーディングがうまくいかず、誰かが私の質問を理解してくれることを願っています。

2つの異なるデザインを持つ方法はありますか。 デスクトップ/ ipad用とモバイル用のデザインがあります。 モバイルデバイス用のアプリケーションは、アプリケーションの設計によく似ています。 私は今、JavaScriptコードがウェブサイトがモバイルデバイスで開かれていることを知っていれば、ウェブサイトはモバイルデバイスのバージョンに変わります。例えば

： デスクトップ/ iPad版はindex.htmlにあるとモバイル版はmobile.html

ある

場合はモバイル版に移動するにはjavascriptのコードを作成する方法があります

なら{ （関数（XXXXX）{ XXXXXX}

Answer 1

次のJavaScriptコードは有用であろう（IS_MOBILE！）：

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> 

希望します。