css - モバイルとデスクトップの CSS ファイル、Cookie、および 2 つの間の切り替え

Question

私が現在取り組んでいる Web サイトはカスタム CMS を使用しており、分割された CSS ファイルを使用してモバイル統合が行われているため、次のものがあります。 - desktop.css - mobile.css

画面サイズを検出し、適切な CSS ファイルを提供する Javascript があります。

ユーザーは、以下のように PHP で設定された Cookie を使用して、小さな画面でサイト全体を表示したり、小さなサイトを大きな画面で表示したりすることができます。

$mob = '?setmob';
$mob_len = strlen($mob);
$self_end = substr($self, strlen($self) - $mob_len);
if($self_end == $mob){
$settomobile = 1;
}
else{

$full = '?setfull';
$full_len = strlen($full);
$full_end = substr($self, strlen($self) - $full_len);
if($full_end == $full){
$settofull = 1;
}
}

if($settomobile == 1)
{
    setcookie("viewing", "", time()-3600);
    setcookie("viewing", "mobile", time()+63113851);
}

if($settofull == 1)
{
    setcookie("viewing", "", time()-3600);
    setcookie("viewing", "desktop", time()+63113851);
}

画面サイズを検出して CSS を提供する Javascript は次のとおりです。

<script type=\"text/javascript\">
function adjustStyle(width) {
width = parseInt(width);
if (width < 750) {
$(\"#size-stylesheet\").attr(\"href\", \"/mobile.css\");";
$mob = "Yes";
$top_contents .= "} else {
$(\"#size-stylesheet\").attr(\"href\", \"/$css_name.css\");  

}

}

function setToMobile() {
var width = 200;
if (width < 750) {
$(\"#size-stylesheet\").attr(\"href\", \"/mobile.css\");";
$mob = "Yes";
$top_contents .= "} else {
$(\"#size-stylesheet\").attr(\"href\", \"/$css_name.css\"); 
}
}

function setToDesktop() {
var width = 1000;
if (width < 750) {
$(\"#size-stylesheet\").attr(\"href\", \"/mobile.css\");";
$mob = "Yes";
$top_contents .= "} else {
$(\"#size-stylesheet\").attr(\"href\", \"/$css_name.css\"); 

}
}

$(function() {";
if(isset($_COOKIE['viewing']) || $settofull || $settomobile){
$view = $_COOKIE['viewing'];
if(($view == 'mobile' || $settomobile == 1) && !$settofull){
$top_contents .= "setToMobile();";
}
elseif(($view == 'desktop' || $settofull == 1) && !$settomobile){
$top_contents .= "setToDesktop();";
}
}
else{

$top_contents .= "   adjustStyle(screen.width);
";}
$top_contents .="
});         </script>";
}

$top_contents = $top_contents . "<link rel=\"stylesheet\" type=\"text/css\" href=\"/admin/css/$css_name.css\" id=\"size-stylesheet\" title=\"default\" />

私が見つけた問題は、Javascript が起動してユーザーをモバイル CSS にリダイレクトする前に、Web サイトが最初に通常の CSS を起動する必要があることです。

モバイル CSS が読み込まれる前にユーザーがサイト全体を表示する必要がないように、これを修正できる簡単な方法はありますか?

よろしくお願いします！